ReactJS：组件不会在状态更改时重新呈现

Question

我正在尝试使用反应钩子更新点击事件的状态。 状态发生变化，但组件不会重新渲染。 这是我的代码片段：

function ThirdPage() {
const [selectedIngredients, setSelectedIngredients] = useState([])

const DeleteIngredient = (ingredient) => {
    let selectedIngredientsContainer = selectedIngredients;
    selectedIngredientsContainer.splice(selectedIngredientsContainer.indexOf(ingredient), 1);
    setSelectedIngredients(selectedIngredientsContainer);
    console.log(selectedIngredients);
}


const selectedIngredientsDiv = selectedIngredients.map(ingredient =>
    (
    <div className={styles.selectedIngredientsDiv}>{ingredient}
                                                    <div className={styles.DeleteIngredient}
                                                        onClick={() => {
                                                        DeleteIngredient(ingredient)}}>x</div></div>
    ))

return (
...

我究竟做错了什么？ 提前致谢！

Answer 1

您的拼接问题，因为它没有保存到 selectedIngredientsContainer。 我会做以下事情：

selectedIngredientsContainer = selectedIngredientsContainer.filter(value => value !== ingredient);

或者

selectedIngredientsContainer.splice(selectedIngredientsContainer.indexOf(ingredient), 1 );
setSelectedIngredients([...selectedIngredientsContainer]);

希望能帮助到你。

Answer 2

通常我会解释发生了什么，但 tldr 是你应该首先检查以确保你的数组不为空，然后你可以过滤掉 currentIngredients。 此外，您不需要大括号在 jsx 中调用该函数，但这可以是个人代码的个人风格。 如果这没有帮助，我很抱歉，但我必须出去工作。 祝你好运！

function ThirdPage() {
  const [selectedIngredients, setSelectedIngredients] = useState([]);

  const DeleteIngredient = ingredient => {
    // let selectedIngredientsContainer = selectedIngredients;
    // selectedIngredientsContainer.splice(selectedIngredientsContainer.indexOf(ingredient), 1);
    // setSelectedIngredients(selectedIngredientsContainer);
    // console.log(selectedIngredients);
    if (selectedIngredients.length > 0) {
      // this assumes that there is an id property but you could compare whatever you want in the Array.filter() methods
      const filteredIngredients = setSelectedIngredients.filter(selectedIngredient => selectedIngredient.id !== ingredient.id);
      setSelectedIngredients(filteredIngredients);
    }
    // nothing in ingredients - default logic so whatever you want
    // log something for your sanity so you know the array is empty
    return;
  };

  const selectedIngredientsDiv = selectedIngredients.map(ingredient => (
    <div className={styles.selectedIngredientsDiv}>
      {ingredient}
      <div className={styles.DeleteIngredient} onClick={() => DeleteIngredient(ingredient)}>
        x
      </div>
    </div>
  ));
}

Answer 3

答案很简单，你的状态数组 selectedIngredients 是用一个空数组初始化的，所以当你在空数组上调用 map 时，它甚至不会运行一次，因此永远不会调用 DeleteIngredient 并且你的状态不会改变，因此不会重新 -渲染发生