在 useEffect 之后在子组件中使用状态会出现什么问题？

Question

我有以下情况无法解释。

我想做的是在子组件中使用来自父组件的状态变量。当我使用 'useEffect' 调用将一些新值加载到此状态时，只有第二个组件正确呈现。在此组件中，我使用 'props' 变量来访问值。

第一个组件仅呈现我最初在父组件的 'useState' 调用中设置的内容，忽略在 useEffect 调用中设置的新状态。在这个组件中，我最初使用相同的道具属性.

设置它的状态

为什么会这样？

这是代码和渲染片段。

App.js

import './App.css';
import First from './First';
import Second from './Second';
import { useEffect, useState } from 'react';

function App() {
  const [someVar, setSomeVar] = useState({dos:['a']});

  useEffect(()=>{
    console.log('useEffect')
    setSomeVar({dos:['a', 'b', 'c']})
  }, [])

  return (
    <div className="App">
      <header className="App-header">
        <First letters={someVar}></First>
        <hr/>
        <Second letters={someVar}></Second>
      </header>
    </div>
  );
}

export default App;

First.js

import { useState } from "react";

export default function First(props) {
  const [letters, setLetter] = useState(props.letters.dos);

  return (
    <div>
      {letters.map((letter) => {
        return <span key={letter}>{letter}</span>;
      })}
    </div>
  );
}

Second.js

export default function Second(props) {

  return (
    <div>
      {props.letters.dos.map((letter) => {
        return <span key={letter}>{letter}</span>;
      })}
    </div>
  );
}

结果

Answer 1

传递给 useState 的值仅在组件 首次挂载 时被 React 用于确定初始状态值。在以后的每次渲染中，该组件使用的状态值将从该组件自己的先前状态中获取，或者从对该组件状态的先前调用中获取 setter.

你做的那一刻

const [letters, setLetter] = useState(props.letters.dos);

您将应用的状态拆分为两个完全独立的部分；一个在 parent 组件中带有 someVar，另一个在第一个 child 组件中带有 letters。对其中任何一个状态的进一步更改都不会影响另一个。

为避免此类问题并保持数据井井有条，最好不要在多个地方复制状态。如果您希望 child 组件能够访问和操作链接到 parent 的状态，请让 parent 传递状态，如果需要，还可以传递状态 setter , without put another useState in the child.

在 useEffect 之后在子组件中使用状态会出现什么问题？

What is the issue when consuming an state in child component after useEffect?

reactjs

react-hooks

use-effect