ReactJs -从调用中解析JSON

8xiog9wr 于 2023-04-20 发布在 React

关注(0)|答案(2)|浏览(132)

我有一个React表单，其中有多个字段需要使用async json调用进行预填充。我试图使用主json中的属性设置按钮的值，但加载后数据不可用。
如何在加载时从异步调用中访问通用json值？

export function App() {
    const [values, setValues] = useState<any[]>([]);

    const [valueOne, setValueOne] = useState();
    const [valueTwo, setValueTwo] = useState();

    // gets called once, no dependencies, loads the grid data
    useEffect(() => {
        //returns
        //Object { valueOne: "N", valueTwo: "Y" }
        Service.getValues()
            .then(data => setValues(data)
            );

        //these are not setting 
        setValueOne(values.valueOne)
        setValueTwo(values.valueTwo)
    }, []);

    return (
        <>
            <ToggleButtonGroup size="sm" type="radio" name="testOne"
                                               value={valueOne}>
                                <ToggleButton id="tbg-radio-1" value={'Y'} variant={'outline-success'}>
                                    Running
                                </ToggleButton>
                                <ToggleButton id="tbg-radio-2" value={'N'} variant={'outline-danger'}>
                                    Suspended
                                </ToggleButton>
                            </ToggleButtonGroup>
                            
                            <ToggleButtonGroup size="sm" type="radio" name="testTwo"
                                                value={valueTwo}>
                                <ToggleButton id="tbg-radio-3" value={'Y'} variant={'outline-success'}>
                                    Running
                                </ToggleButton>
                                <ToggleButton id="tbg-radio-4" value={'N'} variant={'outline-danger'}>
                                    Suspended
                                </ToggleButton>
                            </ToggleButtonGroup>
        </>
    );
}

export default App;

reactjs

来源：https://stackoverflow.com/questions/76056851/reactjs-parsing-json-from-call

2条答案

按热度按时间

gdx19jrr1#

要修复此问题，您可以将valueOne和valueTwo的设置移动到新的以值作为依赖的useEffect中，这样可以确保在状态更新后设置值。
您需要更改如下代码：

const [values, setValues] = useState<any>({valueOne: '', valueTwo: ''});

    const [valueOne, setValueOne] = useState<string>('');
    const [valueTwo, setValueTwo] = useState<string>('');

    useEffect(() => {
        Service.getValues().then(data => {
            setValues(data);
        });
    }, []);

    useEffect(() => {
        setValueOne(values.valueOne);
        setValueTwo(values.valueTwo);
    }, [values]);

赞(0）回复(0）举报 2023-04-20

gkn4icbw2#

setState在下一次渲染之前不会设置状态，因此您需要在拥有data时直接从data获取valueOne和valueTwo，而不是调用setState然后立即尝试访问它。

Service.getValues()
        .then(data => {
            setValues(data)
            setValueOne(data.valueOne)
            setValueTwo(data.valueTwo)
        });

或者，添加另一个useEffect：

useEffect(() => {
    //returns
    //Object { valueOne: "N", valueTwo: "Y" }
    Service.getValues()
        .then(data => setValues(data)
        );
}, []);

useEffect(() => {
    if (values.valueOne) {
        setValueOne(values.valueOne)
        setValueTwo(values.valueTwo)
    }
}, [values])

赞(0）回复(0）举报 2023-04-20

我来回答

ReactJs -从调用中解析JSON

2条答案

相关问题

热门标签

最新问答