Question

我只是想知道为什么在某些情况下状态不会导致渲染组件。

此示例未呈现组件：

const [items,setItems] = useState({
    item_name:'',
    item_price:'',
    color:''
})

some_method = (new_item_name) => {
    items.item_name=new_item_name;
    setItems(items);
}

用这种方法做错了吗？

const [is_rendered, set_is_rendered] = useState(false);

const [items,setItems] = useState({
    item_name:'',
    item_price:'',
    color:''
})

some_method = (new_item_name) => {

    items.item_name=new_item_name;
    setItems(items);

    set_is_rendered(!is_rendered);
}

由于布尔值始终会渲染组件，因此我应该在需要时创建一个新的state来渲染组件。

Answer 1

我认为最好不要触摸对象的原始状态。代替在新对象中复制和修改属性，然后将其传递给setState()。正确的方法是使用设置状态的回调版本。

尝试以下操作：

setItems(prevState => ({
   ...prevState,
   item_name: 'the new value'
}));

所以函数看起来像：

some_method = (new_item_name) => {
   setItems(prevState => ({
      ...prevState,
      item_name: new_item_name
   }));
}

我希望这会有所帮助！

更新状态和渲染组件的正确方法是什么？

1 个答案: