反应：道具未在 map function 内部更新

Question

编辑：这里的 Codesandbox

这是我的父组件的简化版本：

export default function Parent() {
  // State
  const [status, setStatus] = useState(1);
  const [source, setSource] = useState('https://packagingeurope.com/downloads/7475/download/danone-05.03.20.jpg');
  const [steps, setSteps] = useState([
    {
      title: 'Prediction Initiated',
      value: 1,
      loading: false,
      completed: false,
      active: false,
    },
    {
      title: 'Prediction in Progress',
      value: 2,
      loading: false,
      completed: false,
      active: false,
    },
    {
      title: 'Prediction Finished',
      value: 3,
      loading: false,
      completed: false,
      active: false,
    },
  ]);

useEffect(() => {
    if (status) {
      const newSteps = steps;
      newSteps[status - 1].active = true;
      if (status > 1) {
        newSteps[status - 2].completed = true;
      }
      if (status === 3) {
        newSteps[status - 1].active = false;
        newSteps[status - 1].completed = true;
      }
      setSteps(newSteps);
    } else {
      // Do nothing
      console.log('No status match');
    }
  },
  [status]);

return (
<div className="container-fluid">
  <Timeline status={status} steps={steps} source={source} />
</div>
);
}

这是我的子组件：

export default class Timeline extends React.Component {

  renderSteps() {
    const { steps } = this.props;

    return steps.map((step, index) => {
      console.log(step);
      console.log(steps);
      return (
        <div key={`test${index}`}>
          {step.title}
          {step.active && <span>is active</span>}
          {step.loading && <span>is loading</span>}
          {step.completed && <span>is completed</span>}
        </div>
      );
    });
  }

  render() {
    const { status, steps, source } = this.props;

    return (
        <div className="timeline">
          {this.renderSteps()}
        </div>
      </>
    );
  }
}

当我在子组件中执行 console.log steps道具时，我看到它们已正确更新。 （当status === 1时，第一步active属性为true ）

但是当我执行 console.log step （在我的 map 函数中）时，没有更新任何属性。 （当status === 1时，第一步active属性为false ）

您可以在下面的捕获中看到有些地方不对（我已经遇到过这个问题，但不幸的是我不记得我是如何解决它的，我想知道这是否是因为我在这个项目之前没有使用的useEffect挂钩.

谢谢您的帮助

编辑：这里的 Codesandbox

Answer 1

好的，我想通了。

由于我从另一位开发人员那里得到了这段代码，所以我并不了解所有已实现的内容。 我查看了 React 文档以了解问题出在哪里。

通过将第二个参数传递给useEffect function， React 可以跳过效果，并且如果没有任何更改，则不会因性能问题重新渲染组件。 由于我的状态没有改变（我暂时手动更改它），我的组件没有刷新。

通过在第二个参数中添加[steps] width [status] ，一切正常。

 useEffect(() => {
    if (status) {
      const newSteps = steps;
      newSteps[status - 1].active = true;
      if (status > 1) {
        newSteps[status - 2].completed = true;
      }
      if (status === 3) {
        newSteps[status - 1].active = false;
        newSteps[status - 1].completed = true;
      }
      setSteps(newSteps);
    } else {
      // Do nothing
      console.log('No status match');
    }
  }, [status, steps]);