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

Question

I am trying to update state on click event using react hooks. State changes, but component doesn't rerender. Here is my code snippet:

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 (
...

What am I doing wrong? Thanks in advance!

Answer 1

Issue with you splice as its not being saved to selectedIngredientsContainer. I would do following:

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

or

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

Hope it helps.

Answer 2

normally I would leave an explanation on what's going on but tldr is that you should check first to make sure that you're array isn't empty, then you you can filter out the currentIngredients. Also you don't need curly brackets to call that function in the jsx but that can be personal flavor for personal code. I apologize if this doesn't help but I have to head out to work. Good luck!

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 并且你的状态不会改变，因此不会重新 -渲染发生