删除数组 ReactJS 中的一项（React Hooks 和 Redux）答案

【问题标题】：Delete one item in an array ReactJS (React Hooks and Redux)删除数组 ReactJS 中的一项（React Hooks 和 Redux）
【发布时间】：2020-12-01 15:36:00
【问题描述】：

我正在使用 MERN 堆栈创建配方应用程序。

我遇到的问题是尝试删除在配方对象内的数组中找到的成分。我的食谱对象如下所示：

MongoDB Recipe Object

每种成分旁边都有一个十字，您可以点击它来删除。

<div>
      <ol className='pad5px20px'>
        {addIngredients.ingredients.map(data => (
          <div className='ingredient-item padTB5px' key={data}>
            <li>{data}</li>
            <span onClick={() => removeIngredient(data)}>
              <i className='fas fa-trash'></i>
            </span>{' '}
                  
          </div>
        ))}
      </ol>
    </div>

addIngredients 和 removeIngredient 函数如下所示：

  const addIngredient = e => {
e.preventDefault();

if (query === '') return;

addIngredients.ingredients.push(query);
setIngredients(addIngredients);

setRecipe(prevState => ({
  ...prevState,
  ingredients: [
    ...prevState.ingredients,
    { id: Date.now(), ingredient: query }
  ]
}));
};

  const removeIngredient = data => {
const results = addIngredients.ingredients.filter(
  e => e.ingredients !== data
);
setIngredients(
  addIngredients.ingredients.filter(e => e.ingredients !== data)
);
};

每次我从列表中删除一种成分时，我都会收到一条错误消息，指出“TypeError：无法读取未定义的属性 'map'”。

我在这里缺少什么吗？在过去的几个月里，我一直在开发这个应用程序，但我一直坚持这一点。我认为更好的方法是使用 Redux，因为我已经能够使用 reducer 删除整个配方：

    case DELETE_RECIPE:
  return {
    ...state,
    recipes: state.recipes.filter(recipe => recipe._id !== action.payload),
    loading: false
  };

但我如何才能针对一种特定成分？

任何建议将不胜感激。

【问题讨论】：

您在 addIngredients.ingredients.push(query); 中使用了变异函数 (push)。我不确定这是否是你的问题，但总的来说，在 Redux 中你永远不想改变你的对象/数组。相反，您想创建新的：addIngredients.ingredients = [...addIngredients.ingredients, query]; .

标签： reactjs react-redux react-hooks redux-reducers

【解决方案1】：

我为您的代码问题添加了注释）

  const addIngredient = e => {
      e.preventDefault();

      if (query === '') return;

     ***STATE MUTATION***
      addIngredients.ingredients.push(query);
     setIngredients(addIngredients);

    setRecipe(prevState => ({
       ...prevState,
       ingredients: [
       ...prevState.ingredients,
       { id: Date.now(), ingredient: query }
  ]
}));
};

  const removeIngredient = data => {
    const results = addIngredients.ingredients.filter(
       e => e.ingredients !== data
    );
    ***You're adding ingredients object instead of addIngredients as you used in addIngredient method***
   setIngredients(
     addIngredients.ingredients.filter(e => e.ingredients !== data)
   );
};

addIngredients.ingredients.filter(e => e.ingredients !== data) 返回过滤成分，而不是带有过滤成分字段的 addIngredients

应该怎样

  const addIngredient = e => {
      e.preventDefault();

      if (query === '') return;

     setIngredients({
       ...addIngredients,
       ingredients: [
          ...addIngredients,
          query
       ]
     });

    setRecipe(prevState => ({
       ...prevState,
       ingredients: [
       ...prevState.ingredients,
       { id: Date.now(), ingredient: query }
  ]
}));
};

  const removeIngredient = data => {
    const results = addIngredients.ingredients.filter(
       e => e.ingredients !== data
    );

   setIngredients(
    {
       ...addIngredients,
       ingredients: results
  });
};

【讨论】：