时间戳

首页 > 解决方案 > 在添加一些之前使用 UseState 重置值

reactjs - 在添加一些之前使用 UseState 重置值

问题描述

我无法在函数内部进行setMajorandsetMinor工作。

发生的情况是，它只是覆盖了里面的一些数据major并继续在里面添加数据minor

我使用此代码清除其中的所有值，major但它有点乱，看起来我没有useState正确使用该函数。

major.forEach((tk) => {
      tk['material'] = ''
      tk['required'] = 0
      tk['actual'] = 0
      tk['difference'] = 0
      tk['crit'] = 0
      tk['percent'] = 0
    })

handleSelectInput每当我更改值时，select tag它都会向服务器发送请求以获取majorandminor变量的正确值

const majorStates = [
      {
        tank: 1,
        material: '',
        required: 0,
        actual: 0,
        difference: 0,
        crit: 0,
        percent: 0,
      },
      {
        tank: 2,
        material: '',
        required: 0,
        actual: 0,
        difference: 0,
        crit: 0,
        percent: 0,
      },...10],
[major, setMajor] = useState(tankStates),
[minor, setMinor] = useState([]),

const handleSelectInput= async (e) => {
    const { name, value } = e.target

    setMajor(majorStates) // not working
    setMinor([]) // not working

    await axios
      .put(`${PATH}/main-start`, { product: value })
      .then((res) => {
        for (let i = 0; i < res.data.length; i++) {
          //See if data has a type major or minor
          //ParseFloat for decimal that's been returned as str
          if (res.data[i].type === 'MAJOR') {
            major[i].material = res.data[i].material
            major[i].required = parseFloat(res.data[i].required_wt)
            setMajor([...major])
          } else {
            res.data[i].required_wt = parseFloat(res.data[i].required_wt)
            setMinor([...minor, res.data[i]])
          }
        }
      })
      .catch((err) => {
        console.log(err)
      })
  }

我有一个majorStates，因为即使提取数据小于 10，也需要显示 10 值。

对不起，如果这是一个菜鸟问题

标签： reactjsreact-hooksuse-state

解决方案

问题

基于在一个循环中排队一堆状态更新，我猜测不起作用的是只有最后一次排队的状态更新是你看到的。这是由于每次循环迭代都从相同的陈旧状态开始造成的。

你也在改变状态，例如改变索引处major[i].material = res.data[i].material的元素。majori

解决方案

使用功能状态更新来更新前一个状态，而不是前一个渲染周期的状态。浅拷贝数组，然后浅拷贝任何正在更新的嵌套状态/元素。

const handleSelectInput= async (e) => {
  const { name, value } = e.target

  setMajor(majorStates) // reset
  setMinor([]) // reset

  await axios
    .put(`${PATH}/main-start`, { product: value })
    .then((res) => {
      for (let i = 0; i < res.data.length; i++) {
        //See if data has a type major or minor
        //ParseFloat for decimal that's been returned as str
        if (res.data[i].type === 'MAJOR') {
          setMajor(major => major.map((el, index) => index === i ? {
            ...el,
            material: res.data[i].material,
            required: parseFloat(res.data[i].required_wt)
          } : el);
        } else {
          res.data[i].required_wt = parseFloat(res.data[i].required_wt)
          setMinor(minor => [...minor, res.data[i]])
        }
      }
    })
    .catch((err) => {
      console.log(err)
    })
}

推荐阅读