React中如何将数据从子组件发送到父组件

Question

具有以下代码结构， App是父级， Inputs和List是子级，目前我们只关注前两个。

应用程序.js：

import React from 'react';
import './App.css';
import Inputs from './components/Inputs';
import List from './components/List';
import { useState } from 'react';

function App() {
  const [person, setPerson] = useState({ name: '', email: '' });
  const people = [];

  const callback = (e) => {
    people.push(e);
  };

  console.log('people: ', people);
  return (
    <div>
      <Inputs callback={callback} person={person} setPerson={setPerson} />
      <List />
    </div>
  );
}

export default App;

输入.js：

const Inputs = ({ person, setPerson, callback }) => {
  const updateName = (e) => {
    setPerson({ ...person, name: e.target.value });
  };

  const updateEmail = (e) => {
    setPerson({ ...person, email: e.target.value });
  };

  console.log('person: ', person);
  return (
    <div>
      <label>name:</label>
      <input onChange={updateName}></input>
      <label>email:</label>
      <input onChange={updateEmail}></input>
      <button onClick={callback(people)}>add person</button>
    </div>
  );
};

export default Inputs;

当我将值引入输入时，人员 object 正在更新，日志显示，但是当我单击按钮时，回调不起作用，它不会更新父组件中的people列表。

我该如何解决？

Answer 1

您的代码中有很多错误。 首先，您不能将值作为普通变量存储在功能组件的主体中。 每次组件重新渲染时，该值都会重新初始化。 所以首先你得把people放进state：

const [people, setPeople] = useState([]);

其次，当更新它时你不能推入它，因为你不能改变 state，所以当添加一个人到那个数组时你必须使用 state 设置 function：

const addPerson = (person) => {
  setPeople(people => [...people, person]);
};

第三，在您的孩子中，点击参数应该是function ，而不是function call 。 您还引用了孩子中的变量people但您实际上并没有将其作为道具传递，因此孩子不知道该变量指的是什么。 但是现在的人在 state，而你有一个添加人 function，你可以将它作为道具传递，然后在孩子中有onClick={addPerson}

Answer 2

问题

有2个问题：

1. callback会立即在子项中调用。
2. 每次父组件渲染时都会重新声明people 。 people应该是 React state 的一部分。

解决方案

家长

function App() {
  const [person, setPerson] = useState({ name: '', email: '' });
  const [people, setPeople] = useState([]);

  const callback = () => {
    setPeople(people => people.concat(person)); // <-- append current person value
    setPerson({ name: '', email: '' }); // <-- reset person state
  };

  return (
    <div>
      <Inputs callback={callback} setPerson={setPerson} />
      <List />
    </div>
  );
}

孩子

const Inputs = ({ setPerson, callback }) => {
  const updateName = (e) => {
    setPerson(person => ({
      ...person,
      name: e.target.value
     }));
  };

  const updateEmail = (e) => {
    setPerson(person => ({
      ...person,
      email: e.target.value
    }));
  };

  return (
    <div>
      <label>name:</label>
      <input onChange={updateName}></input>
      <label>email:</label>
      <input onChange={updateEmail}></input>
      <button onClick={callback}>add person</button> // <-- don't immediately invoke
    </div>
  );
};

Answer 3

我相信您需要做的不是直接拨打 function。 通过直接调用它，立即调用 function 并丢失返回值。 callback(people)相当于一个值。 因此，通过传递event => callback(people)我们保留返回值，直到按下按钮。

const Inputs = ({ person, setPerson, callback }) => {
  const updateName = (e) => {
    setPerson({ ...person, name: e.target.value });
  };

  const updateEmail = (e) => {
    setPerson({ ...person, email: e.target.value });
  };

  console.log('person: ', person);
  return (
    <div>
      <label>name:</label>
      <input onChange={updateName}></input>
      <label>email:</label>
      <input onChange={updateEmail}></input>
      <button onClick={event => callback(people)}>add person</button>
    </div>
  );
};

export default Inputs;