javascript - 从子组件中处于状态的数组中删除项目

Question

尝试使用点击处理程序从我所在州的 meals 数组中删除一个项目，但它没有按预期工作。我见过将第二个参数传递给 .map 函数的其他示例，但我在 Meal.js 中没有 .map。我可能可以通过将 Meal.js HTML 移动到 MealList.js 来修复它，但我想通过将它们分开来保持代码更清晰。

我缺少什么来完成这个？现在，当我单击 X 按钮删除该项目时，它会删除除一项以外的所有项目。

应用程序.js:

class App extends Component {
    constructor(props) {
        super(props);
        this.state = {
            meals: []
        };
        this.removeMeal = this.removeMeal.bind(this);
    }


    componentDidMount() {
        const meals = [
            {
                id: 1,
                name: "Test one",
                ingredients: [
                    "stuff 1",
                    "stuff 2"
                ]
            },
            {
                id: 2,
                name: "Test two",
                ingredients: [
                    "stuff 1",
                    "stuff 2"
                ]
            },
        ];

        this.setState({
            meals: meals
        });
    }

    removeMeal(e) {
        const meals = this.state.meals;
        const index = meals.indexOf(e.target);
        const newMeals = meals.splice(index, 1);
        this.setState({
            meals: newMeals
        });
    }

    render() {
        return (
            <section>
                <Router>
                    <MealList
                        path="/"
                        meals={this.state.meals}
                        removeMeal={this.removeMeal}
                    />
                </Router>
            </section>
        );
    }

MealList.js:

class MealList extends Component {
    render() {
        return (
            <div>
                <ul className="meal-list">
                    {this.props.meals.map((meal, i) => {
                        return (
                            <Meal
                                name={meal.name}
                                ingredients={meal.ingredients}
                                key={meal.id}
                                removeMeal={this.props.removeMeal}
                            />
                        );
                    })}
                </ul>
            </div>
        );
    }
}

膳食.js:

class Meal extends Component {

    render() {
        return (
            <li>
                <h2>{this.props.name}</h2>
                <ul className="ingredient-list">
                    {this.props.ingredients.map(item => {
                        return <li key={item}>{item}</li>;
                    })}
                </ul>

                <button type="button" className="remove-recipe" onClick={() => this.props.removeMeal(this.props.name)}>
                    &times;
                </button>
            </li>
        );
    }
}

Answer 1

您正在传递 name这顿饭的 e给你的removeMeal方法。自 e.target将是 undefined ，您将始终使用 splice(-1, 1) 删除数组的最后一个元素.

您可以改为使用数组方法 filter 用 name 过滤掉对象你传递给 removeMeal方法。

removeMeal = name => {
  this.setState(prevState => {
    const meals = prevState.meals.filter(meal => meal.name !== name);
    return { meals };
  });
};

class App extends React.Component {
  state = {
    meals: [
      {
        id: 1,
        name: "Test one",
        ingredients: ["stuff 1", "stuff 2"]
      },
      {
        id: 2,
        name: "Test two",
        ingredients: ["stuff 1", "stuff 2"]
      }
    ]
  };

  removeMeal = name => {
    this.setState(prevState => {
      const meals = prevState.meals.filter(meal => meal.name !== name);
      return { meals };
    });
  };

  render() {
    return (
      <section>
        <MealList
          path="/"
          meals={this.state.meals}
          removeMeal={this.removeMeal}
        />
      </section>
    );
  }
}

class MealList extends React.Component {
  render() {
    return (
      <div>
        <ul className="meal-list">
          {this.props.meals.map((meal, i) => {
            return (
              <Meal
                name={meal.name}
                ingredients={meal.ingredients}
                key={meal.id}
                removeMeal={this.props.removeMeal}
              />
            );
          })}
        </ul>
      </div>
    );
  }
}

class Meal extends React.Component {
  render() {
    return (
      <li>
        <h2>{this.props.name}</h2>
        <ul className="ingredient-list">
          {this.props.ingredients.map(item => {
            return <li key={item}>{item}</li>;
          })}
        </ul>

        <button
          type="button"
          className="remove-recipe"
          onClick={() => this.props.removeMeal(this.props.name)}
        >
          &times;
        </button>
      </li>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("root"));

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

<div id="root"></div>