React Hooks 子组件引用多次。

Question

求助。。
话不多说上代码.....快自闭了

子组件

const markse = {
  0: '0',
  25: '25%',
  50: '50%',
  75: '75%',
  100: {
    label: <strong>100%</strong>,
  },
}



const HoursDistribution = (props) => {
  const { name, form, value, data } = props
  const [ buList, setBuList ] = useState([])
  useEffect(() => {
    getTimeSheetBuPercent({
      billServiceNo: 10
    }).then(res => console.log(res))
    setBuList(value)
  }, [value])

  /**
   * @description: 渲染Slider
   * @param {*}
   * @return {*}
   */
  const renderSlider = arr => arr.map((item, i) => {
    return (
      <div key={i}>
        <div>{renderSliderItem(item, i)}</div>
      </div>
    )
  })

  const renderSliderItem =(item, i) => {
    return (
      <div className="render-slider-item">
        <div className="header">{item.businessUnit}</div>
        <div className="content">
          <Slider 
            min={0} 
            max={100}
            marks={markse} 
            value={item.percent}
            onChange={(value) => onChange(value, i)}
          ></Slider>
        </div>
        <div className="footer">
        <InputNumber
          min={0}
          max={100}
          onChange={(value) => onChange(value, i)}
          style={{ margin: '0 16px' }}
          value={item.percent}
        />
        </div>
      </div>
    )
  }

  const onChange = (param, key) => {
    const updateArr = [ ...buList ] 
    updateArr[key].percent = param
    setBuList(updateArr)
    props.onChange && props.onChange(updateArr)
  }

  return (<div>
      <div className={style.render_slider_el}>
      {renderSlider(buList)}
      </div>
    </div>)
}

export default HoursDistribution

父组件

const renderTForm = (arr = []) => {
    return arr.map((item, i) => {
     Tag> : null}
      return ( <HoursDistribution
                  value={item.buList}
                  data={item}
                  onChange={target => onChange(‘buList’, target, item)}/>
    )
    })
  }

const onChange = (name, target, param) => {
      const currData = { ...param }
      currData[name] = target
      let updateWorkingHou = [ ...workHoursColl ]
      const findData = updateWorkingHou.find(item => item.date === currData.date)
      for (const key in findData) findData[key] = currData[key]
      onSubmit && onSubmit(updateWorkingHou)
      saveWorkHours(updateWorkingHou)
    }

const WorkHoursSubmit = (props) => {
  return (
    <div>
    {renderTForm(workHoursColl)}
</div>
  )
}