如何正确更新 state 以响应钩子？

Question

我正在尝试将项目推送到 state 中的数组，但它不起作用。 这是我的代码。

const [features, setFeatures] = useState([''])


const addFeature = (event)=>{
    event.preventDefault();

    let featuresClone = features;
    featuresClone.push('');
    setFeatures(featuresClone);
    console.log(featuresClone, fetaures);
}

这是更新 state 的 function。 在此处的日志中，功能已更新。 但是，当我像这样使用 useEffect 时，

useEffect(()=>{
    console.log(features)
},[features])

它不会记录功能，这意味着功能不会更新。

我究竟做错了什么？

Answer 1

不要直接改变 state，而是这样做：

const addFeature = (event)=>{
    event.preventDefault();

    let featuresClone = [...features];
    featuresClone.push('');
    setFeatures(featuresClone);
    console.log(featuresClone, fetaures);
}

Answer 2

您可以访问上一个 state 并更新 state，如下所示，

const addFeature = (event)=>{
    event.preventDefault();

    setFeatures(prev => [...prev, '']);
}

Answer 3

您的 featuresClone 不是克隆，而是同一个列表，因为与原始整数不同，列表是通过引用而不是值传递的。

使用： let featuresClone = [...features,'']; 克隆它并添加值

所以你也可以避免featuresClone.push(''); 因为使用 [].push，您可能会修改仅通过引用传递的列表。