Question

这是我的代码：

import React from "react";
import Navigation from './Navigation';
import Foot from './Foot';
import MovieCard from './MovieCard';

class Favorites extends React.Component {

render() {
    const { onSearch, favorites, favoriteCallback, totalFavorites, searchKeyUpdate } = this.props;

    return (
        <div>
            <Navigation
                onSearch={onSearch}
                totalFavorites={totalFavorites}
                searchKeyUpdate={searchKeyUpdate} />


            <div className="container">
            <button onClick={()=> this.clearFavorites(favorites)}> Clear all movies </button>
                {(favorites.length < 1) ?
                    <h1 style={{ fontSize: '13px', textAlign: 'center' }}>Please mark some of the movies as favorites!</h1>
                    :
                    <ul
                        className="movies">
                        {favorites
                            .map(movie => (
                                <MovieCard
                                    movie={movie}
                                    key={movie.imdbID}
                                    toggleFavorite={favoriteCallback}
                                    favorites={favorites}
                                />
                            ))}
                    </ul>
                }
                <Foot />
            </div>
        </div>
    );
}


}


const clearFavorites = (favorites) => {
    this.setState({ favorites: [] });

}

按钮需要做的事情是，当我单击它时，它将清除收藏夹的整个状态。 clearFavorites函数用于清除所有内容，但是当我尝试执行此操作时，出现错误：

为什么这不能清除收藏夹的状态？

Answer 1

正如其他人所述，首先将clearFavorites函数移到Favorites类中。

第二，您的favorites列表不是state对象的一部分，而是从this.props.favorites中将其拉出，因此我们不应该使用this.setState，而应该更改道具的价值。

第三，由于您要清空数组，因此可能不需要clearFavorites中的参数吗？请参考以下内容：

首先，我们定义一个构造函数以从props获取值，并将其传递给构造函数中的状态，如下所示：

constructor(props) {
  super(props);
  this.state = {favorites: this.props.favorites}
}

clearFavorites = () => {
  this.setState({favorites: []});
};

然后在您的render方法中最后更改为以下内容：

const { onSearch, favoriteCallback, totalFavorites, searchKeyUpdate } = this.props;
const favorites = this.state.favorites;// Or in your ul tag, instead of using favorites, change it to this.state.favorites

Answer 2

您有两个问题：

clearFavorites函数不在您的课程中。所以你应该把它放进去。
您正在尝试使用函数clearFavorites清除收藏夹数组中的数据，该数据不属于您的状态。因此，首先，您应该将收藏夹数组添加到您的状态，然后您可以操纵信息。我建议您使用功能getDerivedStateFromProps。

Answer 3

您可以尝试将clearFavorites移至组件中

import React from "react";
import Navigation from "./Navigation";
import Foot from "./Foot";
import MovieCard from "./MovieCard";

class Favorites extends React.Component {
  render() {
    const {
      onSearch,
      favorites,
      favoriteCallback,
      totalFavorites,
      searchKeyUpdate
    } = this.props;

    return (
      <div>
        <Navigation
          onSearch={onSearch}
          totalFavorites={totalFavorites}
          searchKeyUpdate={searchKeyUpdate}
        />

        <div className="container">
          <button onClick={() => this.clearFavorites(favorites)}>
            {" "}
            Clear all movies{" "}
          </button>
          {favorites.length < 1 ? (
            <h1 style={{ fontSize: "13px", textAlign: "center" }}>
              Please mark some of the movies as favorites!
            </h1>
          ) : (
            <ul className="movies">
              {favorites.map(movie => (
                <MovieCard
                  movie={movie}
                  key={movie.imdbID}
                  toggleFavorite={favoriteCallback}
                  favorites={favorites}
                />
              ))}
            </ul>
          )}
          <Foot />
        </div>
      </div>
    );
  }
  clearFavorites = favorites => {
    this.setState({ favorites: [] });
  };
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

如何清除状态数组？

3 个答案: