如何通过这个特定示例提升状态

Question

我正在努力提升状态。我有四个不同的组件 Parent、Child1、Child2 和 Child3。

父组件的默认值为“Hi”。 Child3 组件中的默认值更新为“Hi2”。我希望 Child1 组件获得“Hi2”的更新状态，但它没有更新，并且仍然在控制台中打印出“Hi”的默认值。

我不知道我做错了什么？

---

import React, { useState } from 'react';
    
function Parent() {
  const [value, setValue] = useState('Hi');

  return (
    <div>
      <Child1 value={value} />
      <Child2 setValue={setValue} />
    </div>
  );
}

function Child1({value}) => {

  const fetchValue = () => {
    console.log('value is: ', value);
  }

  return (
    <div>
      <Text value={value}/>
    </div>
  );
}

function Child2({setValue}) => {

  return (
    <div>
      <Child3 setValue={setValue}/>
    </div>
  );
}

function Child3({setValue}) => {

  const fetchResults = () => {
    setValue('Hi2');
  }

  return (
    <div>
      <Button click={fetchResults }/>
    </div>
  );
}

Answer 1

子组件不应更改父组件中某些内容的状态。

所以当你这样做时：

<Child2 setValue={setValue} />

更改值的责任从 Parent 传递给 Child2，这破坏了“提升状态”的目的。

你的父母应该保持/改变状态，然后将该状态的结果传递给孩子。孩子们不应该互相知道，而只能知道父母，所以这意味着你的孩子1不应该知道孩子3的存在。

因此考虑到这一点，重构它看起来像：

import React, { useState } from 'react';
    
function Parent() {
  const [value, setValue] = useState('Hi');

  function handleClick() {
    setValue('Hi2');
  }

  return (
    <div>
      <Child1 value={value} />
      <Child2 clickHandler={handleClick} />
    </div>
  );
}

function Child1({value}) => {

  return (
    <div>
      <Text value={value}/>
    </div>
  );
}

function Child2({clickHandler}) => {

  return (
    <div>
      <Child3 clickHandler={clickHandler}/>
    </div>
  );
}

function Child3({clickHandler}) => {

  return (
    <div>
      <Button click={clickHandler}/>
    </div>
  );
}