React 本机功能组件仅在第二次提交时更新状态

Question

当我控制台记录我的值时，它仅在我第二次提交表单时才更新。为什么会这样？

const Link = (props) => {
const { state, scrape } = useContext(ScrapeContext);
const [clipboard, setClipboard] = useState();
const [googleClip, setGoogleClip] = useState(false);
const [googleLink, setGoogleLink] = useState('');
const urlFromClipboard = () => {
Clipboard.getString().then((content) => {
if (content.includes('https://www.google.com')){
setGoogleClip(true);
console.log('googleLink', googleLink);
setClipboard(content);
setGoogleLink(`${content.split('?')[0]}?__a=1`);
} else {
setGoogleClip(false);
}
});
if (googleClip) {
console.log(googleLink);
scrape({ googleLink });
}
}
useEffect(() => {
urlFromClipboard();
console.log('useEffect googleLink', googleLink);
console.log('useEffect state', state);
}, [clipboard]);

return (
<View style={styles.container}>
<View style={styles.inputFieldContainer}>
<TextInput
style={styles.inputField}
placeholder='Enter Google url'
autoCapitalize='none'
autoCorrect={false}
value={googleClip ? clipboard : ''}
/>
</View>
<View style={styles.buttonContainer}>
<TouchableOpacity
onPress={() => {
urlFromClipboard();
}}
style={styles.touchSubmit}
>
<Text style={styles.touchText}>Submit</Text>
</TouchableOpacity>
</View>
{state.errorMessage ? (
<Text style={styles.errorMessage}>{state.errorMessage}</Text>
) : null}
</View>
);
}

我这里有一个组件，它将从 url 中获取数据，并且在提交时它将抓取应用程序所需的某些信息，但是，如果我按两次提交按钮，它只会更新这些控制台日志值。

Answer 1

问题是您在设置状态后立即无法访问状态。因此，您实际上设置了状态，它就在那里，但您只能在第二次运行控制台日志时看到更新的状态。这并不意味着您必须提交两次，但是当您第二次提交时.log您运行控制台第二次并查看值。因为设置状态函数是异步的。在这种情况下，您需要使用回调函数在控制台上实际查看更新的状态。希望有帮助。

Answer 2

就像Bora Sumer提到的，您正在尝试在实际更新之前使用状态值。你可以做这样的事情：

Clipboard.getString().then((content) => {
if (content.includes('https://www.google.com')){
let link = `${content.split('?')[0]}?__a=1`
setGoogleClip(true);
console.log('googleLink', googleLink);
setClipboard(content);
setGoogleLink(link);
console.log(link);
scrape({ googleLink: link });
} else {
setGoogleClip(false);
}
});

Answer 3

每次设置状态时都可以使用 async/await，如下所示：

const urlFromClipboard = () => {
Clipboard.getString().then( async (content) => {
if (content.includes('https://www.google.com')){
await setGoogleClip(true);
console.log('googleLink', googleLink);
await setClipboard(content);
await setGoogleLink(`${content.split('?')[0]}?__a=1`);
} else {
await setGoogleClip(false);
}
});
if (googleClip) {
console.log(googleLink);
scrape({ googleLink });
}
}