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

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。它应该添加"操作"。Actions state是一个将具有id的对象，然后这些id将具有操作及其值，即

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

这一切似乎都很好，但当我点击按钮并调用addAction时，它并没有加载到dom中(在"Flex"元素中(，我必须点击其他东西并返回以加载它。

Answer 1

这里的问题是状态被直接分配给，这与做事的反应方式背道而驰。

使用useState((时，如下所示：

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

任何时候想要更新对象，都应该首先创建一个可变副本(let actionObject = {...actions}(，对对象进行更改，然后使用setState((更新对象的状态中版本。

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