通过这个特定示例传递状态

Question

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

父组件的默认值为“Hi”。 Child3 组件中的默认值更新为“Hi2”。我希望 Child1 组件从 Child3 组件获取“Hi2”的更新状态。我该怎么做？

---

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>
  );
}

Answer 2

代码中很少有语法错误。这是更正后的代码。

function Parent() {
  const [value, setValue] = useState("Hi");

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

// ✅ Fix syntax error
function Child1({ value }) {
  const fetchValue = () => {
    console.log("value is: ", value);
  };

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

// ✅ Fix syntax error
function Child2({ setValue }) {
  return (
    <div>
      <Child3 setValue={setValue} />
    </div>
  );
}

// ✅ Fix syntax error
function Child3({ setValue }) {
  const fetchResults = () => {
    setValue("Hi2");
  };

  return (
    <div>
        ✅ {/* in React you need to use onClick */}
      <button onClick={fetchResults}>Click</button>
    </div>
  );
}