javascript - ReactJS:组件不会在状态更改时重新渲染

Question

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

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]);

希望有帮助。