Question

我有一个要在render（）函数上渲染的数组。数组中的每个元素都是一个HTML元素，其中包含我需要显示的状态变量，HTML可以正确显示，但是内部状态变量即使在渲染时也不会更新

state = {
 array: [],
 id: 2
}

updateState() {
 this.setState({id: 4})
}

componentDidMount(){
 array = [<div> {this.state.id} </div>, <div> {this.state.id} </div>]
}

render() {
 {this.state.array.map(el => return el)}

 //assume something happens here that triggers updateState() multiple times: buttons presses, etc
}

我从没看过4，它会重新渲染，但保留旧值2

Answer 1

您正在componentDidMount函数中创建数组，该数组仅在组件首次呈现时被调用一次。

您应该执行类似的操作

//create function
createArray = () => [<div> {this.state.id} </div>, <div> {this.state.id} </div>]

然后在这样的代码中使用它

{this.createArray().map(el => el)}

希望这会有所帮助。

Answer 2

您需要保存数据并再次渲染：

"11"

使用包含状态变量的.map渲染数组-不更新

2 个答案: