React功能组件-useState / useCallback-值变回/提交时恢复为初始值

问题描述 投票:0回答:1

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

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值。

javascript reactjs
1个回答
0
投票

尝试将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]);
© www.soinside.com 2019 - 2024. All rights reserved.