时间戳

首页 > 解决方案 > 使用包含状态变量的 .map 渲染数组 - 不更新

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

问题描述

我有一个要在 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

标签： javascriptreactjsreact-nativereact-propsreact-state-management

解决方案

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

state = {
 id: 2
}

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

componentDidMount(){
  this.getElements(this.state.id)
}

getElements = (id) => {
  return [<div> {id} </div>, <div> {id} </div>]
}

render() {
 {this.getElements(this.state.id).map(el => el)}

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

推荐阅读