[英]Reassigning state from props value
I have a Select component, once an option is clicked, the value is passed up the parent component.我有一个 Select 组件,一旦单击一个选项,该值就会传递给父组件。
The parent component has an intial value to render the app, but I would like the value to be changed once it receives the new value through props.父组件有一个初始值来呈现应用程序,但我希望一旦它通过 props 接收到新值,就可以更改该值。
My child component has an onChange that receives the prop and passes it to the parent我的子组件有一个 onChange 接收道具并将其传递给父级
const AxesChoice = ({ legendChoice, xChoice, updateAxis, updateLegend }) => {
const [labels, updateLabels] = useState([])
const { Option } = Select
return (
<div>
<Select
key="legendChoice"
style={{ width: 250 }}
value={legendChoice}
onChange={event => {
updateLegend(event)
}}
>
{labels.map(items => (
<Option key={items} value={items.header}>
{items.label}
</Option>
))}
</Select>
</div>
)
}
In my Parent component the child component is rendered like this在我的父组件中,子组件是这样呈现的
<AxesChoice
xChoice={axisChoice}
legendChoice={legendChoice}
updateAxis={updateAxisChoice}
updateLegend={updateLegendChoice}
/>
Intial state values are being set like this初始状态值是这样设置的
const [legendChoice, setLegendChoice] = useState('qualified')
To update legendChoice I have a function要更新 legendChoice 我有一个功能
const updateLegendChoice = event => {
console.log('fired', event)
// legendChoice = event
console.log('legendCHoice', legendChoice)
console.log('event', event)
setLegendChoice({ legendChoice: event })
console.log('newLegend', legendChoice)
axios
.get(`${BASE_URL}/${axisChoice}/${legendChoice}/${yearChoice}`)
.then(res => setState(res.data.data))
.catch(error => console.log(error))
console.log('newState', state)
}
At the momemnt the app crashes with a couple warnings Uncaught Error: Objects are not valid as a React child (found: object with keys {legendChoice}). If you meant to render a collection of children, use an array instead.
目前,应用程序崩溃并显示几个警告Uncaught Error: Objects are not valid as a React child (found: object with keys {legendChoice}). If you meant to render a collection of children, use an array instead.
Uncaught Error: Objects are not valid as a React child (found: object with keys {legendChoice}). If you meant to render a collection of children, use an array instead.
Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.
I have tried updating the legendChoice
by doing this我已经尝试通过这样做更新legendChoice
setLegendChoice(event)
However this outputs然而,这输出
legendCHoice qualified
event role
newLegend qualified
What is the correct way to update the state when the value is from props?当值来自 props 时,更新状态的正确方法是什么?
It should be:它应该是:
setLegendChoice(event.target.value)
When you use the set function it takes just the value, it knows that value is being applied to LegendChoice.当您使用 set 函数时,它只接受该值,它知道该值正在应用于 LegendChoice。 Fairly certain you were essentially setting legendChoice = {legendChoice: yourvalue}, so when you called legendChoice here:可以肯定的是,您实际上是在设置 legendChoice = {legendChoice: yourvalue},所以当您在这里调用 legendChoice 时:
value={legendChoice}
You were putting the value equal to an object, not a string.你把值等于一个对象,而不是一个字符串。
Figured it out弄清楚了
async calls and state updates don't play nicely toghether, the useEffect hook addresses this异步调用和状态更新不能很好地结合在一起,useEffect 钩子解决了这个问题
my function now looks like this我的函数现在看起来像这样
const updateLegendChoice = value => {
setLegendChoice(value)
}
I've moved my API call out of the function and moved it into a useEffect Hook我已将 API 调用移出函数并将其移至 useEffect Hook
useEffect(() => {
axios
.get(`${BASE_URL}/${axisChoice}/${legendChoice}/${yearChoice}`)
.then(res => setState(res.data.data))
.catch(error => console.log(error))
}, [legendChoice])
My API call now fires everytime theres a state update on legendChoice
.我的 API 调用现在每次在legendChoice
上有状态更新时legendChoice
。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.