javascript - React Functional Component-useState/useCallback-提交时值改回/恢复为初始值

我有一个功能组件，用于提交用户输入的文本值。

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中更改值时，该值会在屏幕上正确地在其他组件中更新。

现在，当我单击Submit时，在后端接收的值或如果在获取之前将其打印出来的值为'＃E02E26'（useState中的初始值）。提取请求成功。

这是怎么了？我想在获取主体中发送当前的primaryColor值。

最佳答案

尝试将primaryColor添加到数组：