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] ]})} />

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

2 个答案: