React中如何在子组件List.js内访问父组件App的setPeople方法删除列表项

React遵循单向数据流规则，父组件定义的state修改方法默认只能在父组件内部访问，子组件要修改父组件的state，只需通过props将对应的更新方法从父组件传递给子组件即可，不需要移动const [people, setPeople] = useState(data)的声明位置，你原来的状态定义位置是符合规范的。

第一步：修改App组件代码 #

你可以直接把setPeople传给子组件，但更推荐先封装成删除单个用户的方法再传递，子组件只需要调用方法不需要关心具体实现，更符合组件职责拆分的原则：

function App() {
  const [people, setPeople] = useState(data); //data是一个对象数组
  // 新增删除单个用户的方法
  const deletePerson = (targetId) => {
    setPeople(prevPeople => prevPeople.filter(person => person.id !== targetId))
  }
  return (
    <main>
      <section className="container">
        <h3>{people.length} birthdays today</h3>
        {/* 将deletePerson作为props传递给List组件 */}
        <List people={people} deletePerson={deletePerson} />
        <button onClick={() => setPeople([])}>Clear all</button>
      </section>
    </main>
  );
}

第二步：修改List组件代码 #

List组件直接接收父组件传过来的deletePerson方法调用即可，不需要自己维护修改state的逻辑。同时你原来的代码里deletePerson({ id })是传了一个包含id的对象，后续判断的时候会不匹配，下面的修改也同步修正了这个小问题：

// 解构props拿到deletePerson方法
const List = ({ people, deletePerson }) => {
  return (
    <>
      {people.map((person) => {
        const { id, name, age, image } = person;
        return (
          <article key={id} className="person">
            <img src={image} alt={name} />
            <div>
              <h4>{name}</h4>
              <p>{age}</p>
              <button
                className="btn"
                // 直接调用传入的deletePerson方法，传入当前用户id即可
                onClick={() => deletePerson(id)}
              >
                Delete me (HERE)
              </button>
            </div>
          </article>
        );
      })}
    </>
  );
};

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