在对象中添加项目后如何渲染答案

【问题标题】：How to render after add item in object在对象中添加项目后如何渲染
【发布时间】：2020-01-07 01:57:12
【问题描述】：

您好，我有一个关于页面渲染的问题我在状态中定义了一个数据，其结构如下所示

this.state = {
     Data: this.props.navigation.getParam('Data', 'error')
   };

[{Name: 'Jason',
 Tel: '000000'},
{Name: 'Lily',
 Tel: '001255'},
{Name: 'Henry',
 Tel: '088000'},
]

我调用 API 为每个对象添加项目，我想让数据如下所示

[{Name: 'Jason',
Tel: '000000',
Addr: 'dfsfsdgdrtesf'},
{Name: 'Lily',
Tel: '001255',
Addr: 'rgrhrerger'},
{Name: 'Henry',
Tel: '088000',
Addr: 'dfsfsdgdrrgrgtesf'},
]

我在 ''' 异步组件DidMount() {

for (i = 0; i < Object.keys(this.state.Data).length; i++) {
  await Call_Some_API() => {

    this.state.Data[i].Addr = (Object.keys(jsonData.Other).length + 1).toString();
    this.setState(this.state.Data);
  });
}
console.log(this.state.Data)

} ''' console.log(this.state.Data) 是正确的！但即使我调用 this.setState(this.state.Data)，我也无法在组件中获取 Addr。

我想显示地址，但它总是空的它就像阅读旧数据而不是新数据，或者我的方法不正确。帮帮我吧！谢谢

【问题讨论】：

标签： reactjs react-native

【解决方案1】：

我无法在我的组件中获取地址

因为你正在用这一行改变状态：

   this.state.Data[i].Addr = (Object.keys(jsonData.Other).length + 1).toString();

这样的事情应该可以工作：

for (i = 0; i < Object.keys(this.state.Data).length; i++) {
  await Call_Some_API() => {

    const addr = (Object.keys(jsonData.Other).length + 1).toString();
    let tempState = [...this.state.Data];
    tempState[i] = {...tempState[i], "Addr": addr};
    this.setState({ Data: tempState });
  });
}

【讨论】：

【解决方案2】：

看看这是否有效。

componentDidMount(){
    Call_API.then(
      res => {
        this.setState( prevState => {
          res.data.map( addr => {
            prevState.map( item => {
               item['Addr'] = addr
            })
          })
        })
      }
    )
}

【讨论】：

【解决方案3】：

您不应直接更改状态，而应使用setState 函数来执行此操作。

【讨论】：

【解决方案4】：

你应该使用this.setState({ Data: this.state.Data });。

在 react docs 的 setState 文档中有更多信息。

此外，您可能应该在更改状态之前克隆状态，如 react docs 所述：

永远不要直接改变this.state，因为之后调用setState() 可能替换您所做的突变。像对待this.state 一样对待不可变。

【讨论】：