React -控制输入道具在useCallback中过时了

Question

我有一个控制输入，它的值和onChange事件是通过props设置的。当selectedValueprop改变时，onInputChanged回调被触发，但如果我尝试在这个回调中访问selectedValue，它就过时了。

似乎当selectedValue变化时，onInputChanged在使用新的依赖项更新之前被调用

我可能只是不理解组件的生命周期正确，但有一种方法来确保我可以访问最新的selectedValue从内部的onChange事件?下面是我的代码:

const TestInput = ({ onChange, selectedValue }) => {
const onInputChanged = React.useCallback(content => {
// Will not log the latest selectedValue
console.log(selectedValue);
onChange(content.target.value);
}, [selectedValue]);
return (
<input value={selectedValue} onChange={onInputChanged} placeholder="Test...." />
);
};
const TestContainer = () => {
const [value, setValue] = React.useState('');
return <TestInput selectedValue={value} onChange={setValue} />;
};

这里有一个沙盒链接来玩- https://playcode.io/1042642

Answer 1

不可能从onChange函数访问它，因为该函数不会被渲染两次以显示新值，您可以在useEffect文档链接中检查它。

你可以试试这样做:

const TestInput = ({ onChange, selectedValue }) => {
useEffect(() => {
console.log('selected value', selectedValue);
}, [selectedValue]);
const onInputChanged = React.useCallback(content => {
onChange(content.target.value);
}, [selectedValue]);
return (
<input value={selectedValue} onChange={onInputChanged} placeholder="Test...." />
);
};
const TestContainer = () => {
const [value, setValue] = React.useState('');
return <TestInput selectedValue={value} onChange={setValue} />;
};