javascript - React 功能组件 - useState/useCallback - 值在提交时更改回/恢复为初始值

Question

我有一个功能组件，可以在其中提交用户输入的文本值。

import React, { useState, useEffect, useCallback } from 'react'
// other imports

function Settings (props) {

const [primaryColor, setPrimaryColor] = useState('#E02E26');

useEffect(() => {
    fetch(`//URL`, {...})
        .then(res => res.json())
        .then(
            (result) => {
                setPrimaryColor(result.primaryColor);
            })
},[]);

const handlePrimaryColorChange = useCallback((newValue) => {
    setPrimaryColor(newValue);
}, []);

const handlePCChange = useCallback((newValue) => {
    setPrimaryColor(newValue.hex)
}, []);

const handleSubmit = useCallback((_event) => {
        fetch(`//URL`, {
        method: 'POST',
        headers: {'Content-Type':'application/json'},
        body: JSON.stringify({
            primaryColor: primaryColor
        })})
        .then(res => res.json())
        .then((result) => {
                console.log('response recieved from post api');
            })
  }, []);

    return (
        <div>
            <Page title="Customise UI">
                <Form onSubmit={handleSubmit}>
                    <TextField type="text" onChange={handlePrimaryColorChange} value={primaryColor} />

                    <SketchPicker disableAlpha={true} color={primaryColor} onChangeComplete={handlePCChange}/>

                    <Button primary submit>Save Settings</Button>
                </Form>
            </Page>
        </div>
    )

Settings.getInitialProps = async (context) => {
    return context.query;
}

“useEffect”正确加载了数据，并且设置了“primaryColor”，并且正确的值显示在 TextField 和 SketchPicker 组件上。

当我更改 TextField 和 SketchPicker 中的值时，另一个组件中的值会在屏幕上正确更新。

现在，当我单击“提交”时，后端收到的值或如果我在获取之前打印它，则为“#E02E26”(useState 中的初始值)。获取请求成功。

这里出了什么问题？我想在获取主体中发送当前的primaryColor值。

Answer 1

尝试将 primaryColor 添加到数组中:

const handleSubmit = useCallback((_event) => {
    fetch(`//URL`, {
    method: 'POST',
    headers: {'Content-Type':'application/json'},
    body: JSON.stringify({
        primaryColor: primaryColor
    })})
    .then(res => res.json())
    .then((result) => {
        console.log('response recieved from post api');
    })
}, [primaryColor]);