reactjs - 反应钩子:useState 设置不正确
问题描述
我在父组件中创建了一个 setter 函数并将其传递给它的子组件:
有问题的部分:
export default function Day({ dayInfo, props }) {
var [timeOfDay, setTimeOfDay] = useState('');
function TimeOfDaySetter(index) {
console.log('index ', index);
if (index === 0) {
setTimeOfDay((timeOfDay) => (timeOfDay = 'AM'));
return <Header as="h1">{timeOfDay}</Header>;
} else if (index === 12) {
setTimeOfDay((timeOfDay) => (timeOfDay = 'PM'));
return <Header as="h1">{timeOfDay}</Header>;
}
}
该函数嵌套在子函数的 map 函数中:
{Array.from(Array(amountOfRows)).map((row, index) => {
return (
<React.Fragment key={index}>
<Table.Row>
<Table.Cell rowSpan="2" style={tableStyle}>
{TimeOfDaySetter(index)}
</Table.Cell>
但这是跳过第一个条件?
任何人都可以帮助为什么会发生这种情况?
完整的父级和组件:
import { Header, Table, TextArea } from 'semantic-ui-react';
import React, { useState, useEffect } from 'react';
export default function Day({ dayInfo, props }) {
var [dayInfoInChild, setDayInfoInChild] = useState([]);
var [timeOfDay, setTimeOfDay] = useState('');
function setExactHourHelper(index) {
return index === 0 ? 12 : '' || index > 12 ? index - 12 : index;
}
function TimeOfDaySetter(index) {
console.log('index ', index);
if (index === 0) {
setTimeOfDay((timeOfDay) => (timeOfDay = 'AM'));
return <Header as="h1">{timeOfDay}</Header>;
} else if (index === 12) {
setTimeOfDay((timeOfDay) => (timeOfDay = 'PM'));
return <Header as="h1">{timeOfDay}</Header>;
}
}
useEffect(() => {
if (dayInfo !== null) {
var modifiedDayInfo = dayInfo
.split(' ')
.map((item) => {
if (item.indexOf(',')) return item.replace(/,/g, '');
})
.join('-');
if (localStorage.getItem(modifiedDayInfo)) {
// setDayInfoInChild(function (dayInfoInChild) {
// return [...setDayInfoInChild, modifiedDayInfo];
// });
console.log(modifiedDayInfo);
} else {
localStorage.setItem(modifiedDayInfo, JSON.stringify({}));
}
}
}, [dayInfo, timeOfDay, timeOfDay]);
function TableLayout({ TimeOfDaySetter }) {
var [amountOfRows, setAmountOfRows] = useState(24);
var [textValue, setTextValue] = useState('');
function handleChange(event) {
setDayInfoInChild(event.target.value);
}
const tableStyle = {
borderLeft: 0,
borderRight: 0,
};
const colorOveride = {
color: '#C1BDBD',
};
return (
<>
<h1>{dayInfo}</h1>
<Table celled structured>
<Table.Body>
{Array.from(Array(amountOfRows)).map((row, index) => {
return (
<React.Fragment key={index}>
<Table.Row>
<Table.Cell rowSpan="2" style={tableStyle}>
{TimeOfDaySetter(index)}
</Table.Cell>
<Table.Cell style={tableStyle}>
{
<strong>
{setExactHourHelper(index)}
:00
</strong>
}
<TextArea
rows={2}
name="textarea"
value={textValue}
onChange={handleChange}
placeholder="Tell us more"
/>
</Table.Cell>
</Table.Row>
<Table.Row>
<Table.Cell style={(tableStyle, colorOveride)}>
{
<strong>
{setExactHourHelper(index)}
:30
</strong>
}
<TextArea rows={2} placeholder="Tell us more" />
</Table.Cell>
</Table.Row>
</React.Fragment>
);
})}
</Table.Body>
</Table>
</>
);
}
{
if (dayInfo === null) {
return <p>Loading...</p>;
}
}
return (
<React.Fragment>
<TableLayout
dayInfo={dayInfo}
timeOfDay={timeOfDay}
TimeOfDaySetter={TimeOfDaySetter}
/>
</React.Fragment>
);
}
解决方案
它应该只是 setTimeOfDay("AM") 和第二个条件块 setTimeOfDay("PM")。您通过传入一个返回字符串的函数使其过于复杂。虽然您可以传入一个返回字符串的函数,但为了让您的 setTimeOfDay 将其字符串设置为,您的函数存在一个基本问题,即您也在手动更改状态。
请注意,您的函数中有“timeOfDay = 'AM'”。这完全违背了 setState 和 useState 的目的,因为您是直接操作状态。
传统的 setState 确实有可以接受函数的用例,但我不相信 useState 可以。
// Correct
this.setState(function(state, props) {
return {
counter: state.counter + props.increment
};
});
无论如何,这个功能现在对你没有用。
此外,在您的 useEffect 中。即使您的使用效果与 [dayInfo, timeOfDay, timeOfDay] 相关联,它实际上从未被修改过,至少在您显示的代码中是这样。因此,您的 Day 组件仅在挂载期间获取 dayInfo 的更改,而不是在重新渲染时。
另外,除非我遗漏了什么,因为当你打电话时,你的状态是在你的 Day 组件中管理的,而不是每个单独的 React Fragment
{Array.from(Array(amountOfRows)).map((row, index) => {
return (
<React.Fragment key={index}>
<Table.Row>
<Table.Cell rowSpan="2" style={tableStyle}>
{TimeOfDaySetter(index)}
</Table.Cell>
您只是在地图上的每次迭代中更改 Day 组件的状态,这将导致您的反应片段重新渲染。所以只有最后一个条件会被尊重,因为每个片段都会重新渲染。最好将 props 传递给新的组件项,而不是在每次迭代时调用状态,使状态更复杂以管理每个片段,或者在每个组件中本地管理状态。
推荐阅读
- android - 离开应用程序后如何回到同一个片段
- javascript - 无法下载 Postman 集合和 Smart-car-use-case 中提供的环境 - mimik
- python - 将函数输入参数声明为模块
- python - django REST framework 删除嵌套的 json
- json - 从 QT 中的字符串中删除转义字符
- c# - 无法使用 c# 连接 AWS (EC2) 数据库 (mysql) SSH 隧道
- typescript - Angular 7:我可以将通过 viewChild 或 contentChild 访问的组件实例与 componentFactoryResolver 一起使用吗?
- c - 构建 gettext 0.20 时出现错误:重新定义“vasprintf”
- jquery - 不支持空扩展名。异常详细信息:System.ArgumentException:不支持空扩展
- javascript - 正则表达式从 React 中的动态 URL 中提取城市和城市代码