React中从Props初始化State无效问题求助

核心问题1：useState初始值仅生效一次 #

你遇到的第一个问题是useState的初始参数只在组件首次渲染时读取。如果父组件的props.people是异步获取的（比如从API请求数据），组件第一次挂载时props.people还是空数组，此时useState(props.people)就把state初始化成了空数组。后续父组件拿到数据更新props.people时，useState不会自动同步这个新值，所以你的state里始终是空数组。

而你console.log(props.people)能看到正确值，是因为React组件更新后，你看到的是最新的props，但state并没有跟着更新。

核心问题2：过滤逻辑覆盖了原始数据 #

你的filterPeople函数里用当前state的people进行过滤，然后把结果设置回state，这会导致原始数据被永久覆盖。比如第一次过滤后，state里只剩下符合条件的项，后续再过滤只能基于这个已过滤的数组，没法回到原始的完整数据集合。

修复方案 #

方案1：同步props到state（适合需要独立修改state的场景）

如果确实需要把props存到state里，用useEffect监听props.people的变化，实时同步state：

import React, { useState, useEffect } from "react";
import Person from "./Person";
import Filter from "./Filter";

function People(props) {
  const [people, setPeople] = useState(props.people);

  // 监听props变化，同步更新state
  useEffect(() => {
    setPeople(props.people);
  }, [props.people]);

  function filterPeople(name) {
    // 基于原始props.people过滤，避免丢失原始数据
    const filtered = props.people.filter((person) =>
      person.name.toLowerCase().startsWith(name.toLowerCase())
    );
    setPeople(filtered);
  }

  return (
    <div>
      <Filter filter={filterPeople} />
      {people.map((person) => (
        <Person key={person.id} person={person} />
      ))}
    </div>
  );
}

export default People;

方案2：直接基于props过滤（更推荐，避免冗余state）

其实不需要把props复制到state里，直接用一个单独的state存储过滤后的结果，始终基于原始的props.people进行过滤：

import React, { useState, useEffect } from "react";
import Person from "./Person";
import Filter from "./Filter";

function People(props) {
  // 只存储过滤后的结果，初始值为原始props数据
  const [filteredPeople, setFilteredPeople] = useState(props.people);

  // 当原始props数据更新时，重置过滤结果
  useEffect(() => {
    setFilteredPeople(props.people);
  }, [props.people]);

  function filterPeople(name) {
    // 始终基于原始props.people过滤，不会丢失数据
    const result = props.people.filter((person) =>
      person.name.toLowerCase().startsWith(name.toLowerCase())
    );
    setFilteredPeople(result);
  }

  return (
    <div>
      <Filter filter={filterPeople} />
      {filteredPeople.map((person) => (
        <Person key={person.id} person={person} />
      ))}
    </div>
  );
}

export default People;

额外优化点 #

• 不要用数组索引作为key，尽量使用每个person对象的唯一标识（比如person.id），这能避免React列表渲染时出现不必要的重渲染或错误。
• 如果父组件是异步加载数据，建议在父组件中添加加载状态（比如loading），在数据未加载完成时显示加载提示，避免子组件渲染空列表。

内容的提问来源于stack exchange，提问作者Mr. Cob