在React父组件中如何向子组件SenViewer传递数据并更新其状态？

第一步：修复子组件的语法错误 #

你当前写的SenViewer是函数组件，存在以下明显语法问题：

• 函数组件没有this上下文，不能使用this.setSen、this.state这类类组件专属的写法
• 函数组件的第一个入参是props对象，不能直接拿到传入的data
• 不能在组件顶层直接调用状态更新方法，会触发无限重渲染

第二步：调整子组件接收父组件传入的数据 #

两种可选实现方式，根据你的业务需求选择即可：

方案1：子组件不维护内部状态，直接使用父组件传入的props（更推荐，减少冗余状态） #

const SenViewer = ({ sens }) => {
  return (
    <div>
      {sens.map((user) => (
        <Card className='text-center' key={user.id}>
          <Card.Header>
            Ticket: <p>Sen </p>
          </Card.Header>
          <Card.Body>
            <Card.Title>
              <p>Entire Audio</p>
            </Card.Title>
            <Card.Text>
              Magnitude:
              <p>{user.id}</p>
              Score
              <p>{user.total}</p>
            </Card.Text>
          </Card.Body>
          <Card.Footer className='text-muted'>
            <Button variant='primary'>TODO: smiley if good total</Button>
          </Card.Footer>
        </Card>
      ))}
    </div>
  );
};

方案2：子组件需要维护内部状态，监听props变化更新 #

如果子组件需要在内部修改数据不影响父组件，可以用这个方案：

import { useState, useEffect } from 'react';

const SenViewer = ({ sens: outerSens }) => {
  const [sen, setSen] = useState({
    sens: [],
  });
  // 监听父组件传入的sens变化，更新内部状态
  useEffect(() => {
    setSen({ sens: outerSens });
  }, [outerSens]);

  return (
    <div>
      {sen.sens.map((user) => (
        <Card className='text-center' key={user.id}>
          <Card.Header>
            Ticket: <p>Sen </p>
          </Card.Header>
          <Card.Body>
            <Card.Title>
              <p>Entire Audio</p>
            </Card.Title>
            <Card.Text>
              Magnitude:
              <p>{user.id}</p>
              Score
              <p>{user.total}</p>
            </Card.Text>
          </Card.Body>
          <Card.Footer className='text-muted'>
            <Button variant='primary'>TODO: smiley if good total</Button>
          </Card.Footer>
        </Card>
      ))}
    </div>
  );
};

第三步：父组件逻辑实现 #

父组件维护要传给子组件的数据，在指定函数执行完成后更新该数据即可：

import { useState } from 'react';

const Parent = () => {
  // 维护传给子组件的数据源
  const [senData, setSenData] = useState([]);

  // 你需要触发更新的函数，比如按钮点击事件
  const handleActionFinish = () => {
    // 这里替换为你自己的业务逻辑，执行完成后更新senData
    const newData = [
      {id: 1, total: 95},
      {id: 2, total: 88}
    ];
    // 更新数据后会自动同步给子组件
    setSenData(newData);
  };

  return (
    <div>
      <button onClick={handleActionFinish}>点击触发子组件更新</button>
      <SenViewer sens={senData} />
    </div>
  );
};

内容的提问来源于stack exchange，提问作者jdog