React在下一次渲染时运行一些东西

Question

我有一个不受控制的子组件，我在创建保存功能时遇到了麻烦。(可悲的是，我找不到任何方法来控制它;它是一个文本框，通过使用一个粗糙的内容可编辑的解决方案(这是我能做的最好的情况下，我的情况)。

父母

const [text, setText] = useState('');
const save = () => {
makeAPICall(text);
};
...
return <Child initialText={text} setText={setText} save={save} />

孩子

handleClick = () => {
props.setText(myText)
props.save();
};

问题是Parent中的text没有立即更新，因此它以旧状态调用Parent的save。我想运行save下一个渲染更新text在父。这可能吗?

目前，我的解决方案是我有一个saveFlag和useEffect(..., [saveFlag])，但它可能会变得非常混乱以后，我想知道是否有更好的东西。

Answer 1

也许你可以通过函数参数传递文本:

父母

const save = (text) => {
makeAPICall(text);
};

孩子

handleClick = () => {
props.setText(myText)
props.save(myText);
};

Answer 2

您可以/应该使用useEffect钩子而不是使用另一个save函数。它将在"之后"运行。每个text更改作为回调。

const [text, setText] = useState('');
useEffect(() => {
makeAPICall(text);
}, [text]);
return <Child initialText={text} setText={setText} />

看看这个