使用后，在儿童组件中消耗状态时，问题是什么？

Question

我有以下我无法解释的情况。

我要做的是从子组件中的父组件中使用状态变量。 当我使用“使用效率”调用将一些新值加载到此状态时，仅正确的第二个组件才能正确呈现。在此组件中，我使用“ props”变量访问值。

第一个组件仅渲染我最初在父级调用中设置的内容，而忽略了使用效率调用中的新状态设置。在此组件中，我最初使用相同的道具属性设置其状态。

为什么会发生？

这是渲染的代码和片段。

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使用。在每个将来的渲染上，该组件使用的状态值将从该组件自己的先前状态或对该组件的状态设置器的先前调用中获取。

目前，

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

您将应用程序的状态分为两个完全独立的部分；一个在父组件中带有somevar，另一个在第一个子组件中带有Letters。对这两个州中的任何一个的进一步变化都不会影响另一个国家。

为了避免这种问题，并保持数据井井有条，通常不要在一个以上的地方重复状态是一个好主意。如果您希望子组件能够访问和操纵链接到父母的状态，请父母向下传递状态，如果需要，状态设置者，，，不放置另一个usestate < /代码>在孩子中。