无法更新状态（对象数组）：React

Question

由于我刚刚做出反应，我对反应状态的处理很少。更新简单状态时一切正常，但更新包含对象数组的状态时会出现问题。我在stackoverflow和其他网站上找到了一些相关的答案，但仍无法找到更好的问题解决方案。

初始状态：

this.state = {
        article: [{
            title: '',
            category: '',
            author: '',
            desc: '',
            date: ''
        },
        {
            authorName: '',
            profile: '',
            joinedOn: ''

        }]
    }

更新状态：

<input type="text" name="title" placeholder="Enter article title" className="form-control" onChange={e => this.setState({article: [...this.state.article, {title: e.target.value}]})} />

进入州：

console.log(this.state.article[0].title)

控制台显示空字符串。

Answer 1

没有太多关于你的component内部发生了什么的想法：

您现有的onChange()每次触发时都会推送一篇新文章。

改进可能是将title值临时存储在this.state中。

请参阅下面的实际示例。

// Articles.
class Articles extends React.Component {

  // State.
  state = {articles: [], title: ''}

  // Render.
  render() {
    const {articles, title} = this.state
    return (
      <React.Fragment>
        <form onSubmit={this.addArticle}>
          <input type="text" value={title} onChange={e => this.setState({title: e.target.value})}/>
          <button type="submit">Add article</button>
        </form>
        <h3>Articles</h3>
        {articles.map((article, index) => <div key={index}>{article.title}</div>)}
      </React.Fragment>
    )
  }
  
  // Add Article.
  addArticle = event => {
    event.preventDefault()
    const {title} = this.state
    if (!title) return console.error('Invalid title.')
    return this.setState(state => ({
      articles: state.articles.concat([{title}]),
      title: ''
    }))
  }
  
}

// Mount.
ReactDOM.render(<Articles/>, document.querySelector('#root'))

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div id="root"></div>

Answer 2

<input type="text" name="title" placeholder="Enter article title" className="form-control" onChange={e => this.setState({article: [{
...this.state.article[0],
{title: e.target.value}
},this.state.article[1] ]})} />