Question

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

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


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

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

这是更新状态的函数。在此处的日志中，功能已更新。但是，当我做这样的 useEffect 时，

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

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

我做错了什么？

Answer 1

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

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

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

Answer 2

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

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

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

Answer 3

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

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

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

如何正确更新钩子中的反应状态？

3 个答案: