React中通过用户输入更新state数组时无法存入3部电影如何解决？

问题原因 #

你当前的favoriteMovies更新逻辑存在两个核心错误：

• 每次输入都会将新值追加到数组尾部，而不是修改对应输入框绑定的数组下标位置
• 初始favoriteMovies长度为3，每次输入后数组长度持续增加，但三个输入框始终绑定数组前3位的初始空值，因此输入内容无法同步到对应位置，也无法正确收集3部电影的输入结果

修复方案 #

1. 给输入框添加下标标识

在三个input上新增data-index属性，区分每个输入框对应的数组下标：

<input
  placeholder="favorite movies"
  data-index={0}
  value={this.state.favoriteMovies[0]}
  onChange={this.handleFavoriteMoviesChange}
/>
<input
  placeholder="favorite movies"
  data-index={1}
  value={this.state.favoriteMovies[1]}
  onChange={this.handleFavoriteMoviesChange}
/>
<input
  placeholder="favorite movies"
  data-index={2}
  value={this.state.favoriteMovies[2]}
  onChange={this.handleFavoriteMoviesChange}
/>

2. 修改state更新逻辑

改用函数式setState读取最新state，修改数组对应下标的值，避免state异步更新导致的旧值问题：

handleFavoriteMoviesChange = (e) => {
  const targetIndex = Number(e.target.dataset.index);
  this.setState(prevState => {
    const updatedMovies = [...prevState.favoriteMovies];
    updatedMovies[targetIndex] = e.target.value;
    return { favoriteMovies: updatedMovies };
  });
};

3. 追加到外部文件数组的操作

后续需要将3部电影追加到外部文件的现有数组时，直接读取this.state.favoriteMovies合并即可：

// 示例：和外部原数组合并
const finalArray = [...原外部数组, ...this.state.favoriteMovies]

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