我的测试应用程序上的ReactJS问题

Question

所以，我一直在开发我的第一个ReactJS应用程序。只是一个简单的表单，您可以在其中输入一个电影名称，然后从IMDB获取数据，并将它们作为一个模块添加到页面中。一切都很好。

然而，每个电影模块也有一个删除按钮，该按钮应该删除该特定模块并触发重呈现。这不是很好，因为无论你点击哪个按钮，它总是删除最后添加的电影模块，而不是你点击的那个。

App：http://lukeharrison.net/react/

Github代码库：https://github.com/WebDevLuke/React-Movies

我只是想知道有没有人能发现这背后的原因？

干杯!

Answer 1

只是一种预感，但是您应该使用唯一的key，而不仅仅是映射函数的索引。这种反应方式将理解电影不是通过某个迭代索引来识别的，而是通过一个实际值来识别的，这可能会解决您的问题。

var movies = this.state.movies.map(function(movie, index){
  return (
    <Movie key={movie} useKey={index} removeMovieFunction={component.removeMovie} search={movie} toggleError={component.toggleError} />
  );
});

这是因为React重新评估了您的属性，看到什么都没有改变，只是从列表中删除了最后一个<Movie />。每个电影的componentDidMount功能从未运行过一次以上，并且电影1、电影2和电影3的状态仍然存在。因此，即使您提供search={movie}，它也不会做任何事情，因为this.props.search只在componentDidMount中使用。

Answer 2

我不太清楚为什么它没有正确地呈现，因为数据集看起来很好。

看看代码，我会把你的删除函数改为.

var index = this.state.movies.indexOf(movieToRemove);
console.log(this.state.movies);

if (index > -1) {
    this.state.movies.splice(index, 1);
}

console.log(this.state.movies);
this.setState(this.state.movies);

我的假设是，状态没有得到正确的更新。无论何时更新状态，都应该始终使用setState (除非约定更改，我也不知道)。

另外，您不需要显式地调用forceUpdate。一旦调用了setState，React就会自动完成它需要做的事情，并重新添加新的状态。

Answer 3

状态应该是来自顶层组件(称为容器)的单向状态(从上到下传递)。在这个实例中，您的顶级组件中有搜索字符串的状态，然后通过IMDB从" movie“组件本身中加载单个电影数据。

您应该重构代码以处理顶级容器中的所有状态，并且只将完整的电影数据传递给哑" movie“组件。它应该关心的只是渲染你传递给它的道具，而不是获取它自己的数据。