开发者问题收集

如何将对象推送到数组状态?

2021-07-18
140

我正在制作一个 React 应用,每次提交时都会出现错误“TypeError:无法读取未定义的属性‘map’”。我推测这是因为每当我使用 this.setState 时,它都会用该值完全覆盖数组,而不是将值推送到数组状态中。我如何才能将值推送到数组状态中而不覆盖数组?

3个回答

尝试此代码:

this.setState = [...state, value]

Mint
2021-07-18

我认为你需要先像这样检查数据:

const [happyData, setHappyData] = useState([])
    
        data = [
          {
            "userId": 1,
            "id": 1,
          },
        {
            "userId": 2,
            "id": 3,
          }]
    // check data is there or not 
        data && data.map((item)=>{
        //do something
    })

    // for pushing data 
    setHappyData((happyData)=>{
    ...happyData, data

})
amit kumar
2021-07-18

对于类组件:

class Component extends React.Component {
  this.state = { x: 0 };

  const increaseValue = () => {
    this.setState((preValue) => ({
      ...preValue,
      x: preValue.x + 1
    }))
  }

  render() {
    return (
      <button onClick={increaseValue}>click</button>
    )
    
  }
}

另外,我建议您使用函数组件和钩子来提高效率和编写更优雅的代码。

function Component = () => {
  const [number, setNumber] = useState({ number: 0 });
 
  const increaseValue = () => {
    setNumber(preValue => ({ ...preValue, number: preValue.number + 1 }))
  }

  return (<button onClick={increaseValue}>click</button>)
}
Saeed Hemmati
2021-07-20