映射状态更改时组件不更新

Question

状态图不会在状态更改时立即更新，只会在 dom 其他操作后更新。

最初声明的状态：

const [actions, setActions] = useState({});

用于添加到状态的函数：

const addAction = function(action, value){
      let actionObject = actions;
      let array = [];
      array.push({action: action, value:value});
      actionObject[selected.id] = array;
      setActions(actionObject);
}

渲染中 dom 的状态输出：

{           
   actions[selected.id] ? (
         actions[selected.id].map((a,i) => 
         <Flex key={i}>
         <Text>{a.action}</Text>
         <TextBox value={a.value}></TextBox>
         </Flex>)
    ) : ('') 
}

我有一个按钮，当我点击它时会调用函数 addAction。它应该添加 'action'。 Actions state 是一个具有 id 的对象，这些 id 将具有 action 及其值 ie

{
    id0567: [{
      action: 'click link', 
      value: 'example.com'
    }]
}

一切似乎都工作正常，但是当我单击按钮并调用 addAction 时，它并没有加载到 dom（在 'Flex' 元素中）我必须单击其他东西然后返回加载。

Answer 1

这里的问题是直接分配状态，这违背了反应的做事方式。

使用 useState() 时如下：

const [actions, setActions] = useState({});

任何时候你想更新对象，你应该先制作一个可变副本（let actionObject = {...actions}），对对象进行更改，然后使用 setState() 更新 in-state 版本对象的。

let actionObject = {...actions};
let array = [];
array.push({action: action, value:value});
actionObject[selected.id] = array;
setActions(actionObject);

映射状态更改时组件不更新

Component not updating when mapped state changes

jsx

reactjs

use-state