javascript - 无法使用附加元素访问更新的状态
问题描述
我正在使用按钮上的 onClick 创建 JSX 元素:
<div onClick={() => addWeek()} >
add week
</div>
然后我更新状态(将新项目添加到数组):
//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 创建的,现在我的状态中有两个对象。
<select
onChange={(event) => handleWeekly(event)}
id={`n${weekly.length + 1}`}
>
//Some options
</select>
但在这里我无法访问更新后的状态,我得到一个对象。
const handleWeekly = (event) => {
// I get one object
console.log(weekly);
};
代码沙盒:https://codesandbox.io/s/strange-nightingale-l6qg3?file=/src/App.js: 0-1372
解决方案
我会以不同的方式处理这个问题。您可以映射数据并以这种方式呈现组件,而不是将标记置于状态中:
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>
);
}
以这种方式更容易跟踪您的状态。
推荐阅读
- asp.net - 在 asp.net 核心 API 开发中,我从自动生成的 dbcontext 中添加连接字符串,它的抛出错误
- ruby-on-rails - Emacs HAML 模式:如何修复/设置 ruby 代码多行缩进行为
- asp.net - 如何配置 asp.net 服务提供程序(Web 应用程序)以使用 Sustainsys.Saml2 和 OKTA 作为身份提供程序
- javascript - 使用 Firebase React Native Hooks 更新多个字段
- sql - 自愈 SQL 表可能吗?
- java - @Service @Controller @Repository 的 Java Spring 错误:创建 bean 时出错
- flutter - 如何使用 Flutter 在 Android Studio 中禁用警告
- c - 如何在C中调用引号/字符串内的变量?
- python - 如何在 google colab 中使用 tensorflow 1.6.0,或者如何在 colab 中使用 yolo v3 keras
- powershell - 如何使用 PowerSell 获取类提供的验证参数类