Question

嗨，我对页面渲染有疑问我在状态中定义了一个数据，其结构如下所示

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'},
]

我在 ''' 异步componentDidMount（）{

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。

我想显示Addr，但它始终为空就像读取旧数据而不是读取新数据，或者我的方法不正确。帮帮我！谢谢

Answer 1

我无法在组件中获得Addr

因为您正在使用此行更改状态：

   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 });
  });
}

Answer 2

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

setState文档中有关于react文档的更多信息。

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

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

Answer 3

您不应该直接更改状态，而应该使用setState函数。

Answer 4

看看是否可行。

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

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

4 个答案: