反应钩子：useState 设置不正确

Question

我在父组件中创建了一个 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>
  );
}

Answer 1

它应该只是 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 传递给一个新的组件项，而不是在每次迭代时调用 state，让你的 state 更复杂地管理每个片段，或者在每个组件中本地管理你的 state。

Answer 2

我看到你将箭头函数作为 setTimeOfDay 参数传递：

setTimeOfDay((timeOfDay) => (timeOfDay = 'AM'));

相反，您应该像通常的设置器一样调用 setTimeOfDay，即：

setTimeOfDay('AM');