道具更改时反应子组件不更新

Question

我正在尝试在 React 中构建一个本地搜索，该搜索由一个带有搜索输入的父组件和一个包含搜索结果列表的子组件组成。我创建了一个包含搜索查询和搜索结果列表的 React 状态对象。当输入字段更改时，将运行搜索以生成新的结果集，并更新两个属性（查询和结果）。搜索输入正在按预期更新，但子组件不会重新渲染，尽管其 prop 已更新。为简洁起见，我删除了一些代码，但如果您需要更多信息，请告诉我。

export const Search = () => {
  let [searchState, setSearchState] = React.useState({});

  let handleChange = (event) => {
    searchState['results'] = searchProducts(event.target.value);
    searchState['query'] = event.target.value;
    setSearchState(searchState);
  };

  return (
    <div>
      <FormControl>
        <Input
          value={searchState.query}
          onChange={handleChange}>
          Search...
        </Input>
      </FormControl>
      <SearchResults results={searchState.results}></SearchResults>
    </div>
  );
};

export const SearchResults = (props) => {
  return (
    <List>
      {props.results?.map((product, index) => (
        <ListItem key={index}>
          <ListItemText primary={product.name}></ListItemText>
        </ListItem>
      ))}
    </List>
  );
};

我的问题是：为什么 SearchResults 组件不会在 searchState.results 更改时重新呈现？

Answer 1

你在 handleChange 函数中改变你的状态对象。组件不会重新渲染，因为 searchState 仍然是上一个渲染周期中的相同对象引用。

let handleChange = (event) => {
  searchState['results'] = searchProducts(event.target.value); // mutation!
  searchState['query'] = event.target.value; // mutation!
  setSearchState(searchState); // safe reference back into state
};

你不应该直接改变状态对象。使用功能状态更新和浅拷贝现有状态到 new 状态对象引用。然后更新您要更新的属性。

let handleChange = (event) => {
  const { value } = event.target;

  setSearchState(searchState => ({
    ...searchState,
    results: searchProducts(value),
    query: value,
  }));
};