React setState更新状态正确但未触发DOM重渲染新增项目问题

你在render方法中遍历渲染用的是组件外部定义的初始静态常量projects，而非this.state中存储的会动态更新的项目列表。所以无论你怎么调用setState更新state内的projects值，渲染的数据源始终是固定不变的初始数组，自然看不到新增的项目。

1. 仅需要修改render方法中遍历的数据源，把projects.map替换为this.state.projects.map即可解决问题。
2. 可选优化：遍历的key直接使用项目自身唯一的id属性，比索引、title更可靠，可避免潜在的列表渲染异常。

修正后的核心代码片段如下：

render () {
    return (
        <div className='App'>
            <input type='button' value='Add project' onClick={this.addProject}/>
            <div className='projects'>
                {/* 这里改成从state取数据，key用项目自身id */}
                {this.state.projects.map((project) =>
                    <div className='Project' key={project.id}>
                        Project-Title: { project.title}
                    </div>
                )}
            </div>
        </div>
    )
}

你之前尝试的forceUpdate、数组深拷贝、修改key为title都没有命中核心问题，只要渲染数据源不对，无论怎么触发重渲染、怎么正确更新state，最终渲染的内容都是固定的初始值，自然看不到更新效果。

内容的提问来源于stack exchange，提问作者NeilArmstrong9000