英文:
ReactJs - Parsing JSON from call
问题
以下是您要翻译的内容：
I have a React form with multiple fields that need to be pre-filled with an async json call. I'm trying to set the value of the buttons with attributes from the main json but the data isn't available after load.
How would you access generic json values from an async call on load?
export function App() {
const [values, setValues] = useState([]);
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;
请注意，我已经删除了代码部分，只提供了您要翻译的注释和文本。
英文:
I have a React form with multiple fields that need to be pre-filled with an async json call. I'm trying to set the value of the buttons with attributes from the main json but the data isn't available after load.
How would you access generic json values from an async call on load?
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;
答案1
得分: 1
setState 在下一次渲染之前不会设置状态，因此当你拥有 data 时，需要直接从中获取 valueOne 和 valueTwo，而不是调用 setState 然后立即尝试访问它。
Service.getValues()
.then(data => {
setValues(data)
setValueOne(data.valueOne)
setValueTwo(data.valueTwo)
});
或者，可以添加另一个 useEffect：
useEffect(() => {
// 返回
// Object { valueOne: "N", valueTwo: "Y" }
Service.getValues()
.then(data => setValues(data));
}, []);
useEffect(() => {
if (values.valueOne) {
setValueOne(values.valueOne)
setValueTwo(values.valueTwo)
}
}, [values]);
英文:
setState doesn't set state until the next render, so you need to get valueOne and valueTwo from data directly when you have it, not call setState and then immediately try to access it.
Service.getValues()
.then(data => {
setValues(data)
setValueOne(data.valueOne)
setValueTwo(data.valueTwo)
});
Or, add another 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])
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论