![](/img/trans.png)
[英]Function passed as context value can't access updated component state when called by a consumer
[英]can't access to updated state with appanded element
我正在使用按钮上的 onClick 创建 JSX 元素:
<div onClick={() => addWeek()} >
add week
</div>
然后我更新 state (将新项目添加到数组):
//my state that has one object initially (I want to add more)
const [weekly, setweekly] = useState([
{
id: 'n1',
day_week: null,
start_time: null,
end_time: null,
},
]);
const addWeek = () => {
setweekly([
...weekly,
{
id: `n${weekly.length + 1}`,
day_week: null,
start_time: null,
end_time: null,
},
]);
}
创建 JSX 元素后,我在该元素上有一个 onChange 事件:
注意:这个元素是用 onClick 创建的,我的 state 现在有两个对象。
<select
onChange={(event) => handleWeekly(event)}
id={`n${weekly.length + 1}`}
>
//Some options
</select>
但在这里我无法访问更新的 state 我得到了一个 object。
const handleWeekly = (event) => {
// I get one object
console.log(weekly);
};
代码沙盒: https://codesandbox.io/s/strange-nightingale-l6qg3?file=/src/App.js:0-1372
我会以不同的方式处理这个问题。 而不是在 state 中放置标记,您可以通过您的数据 map 并以这种方式呈现您的组件:
export default function App() {
const [weeks, setWeek] = useState([
{
id: "n1",
day_week: null,
start_time: null,
end_time: null
}
]);
const addWeek = () => {
setWeek([
...weeks,
{
id: `n${weeks.length + 1}`,
day_week: null,
start_time: null,
end_time: null
}
]);
};
const handleWeekly = (event) => {
console.log(weeks);
};
return (
<div className="App">
<div onClick={() => addWeek()}>add week</div>
{weeks.map((week) => {
return (
<select
onChange={(event) => handleWeekly(event)}
id={`n${week.id}`}
key={`n${week.id}`}
>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
);
})}
</div>
);
}
以这种方式更容易跟踪您的 state。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.