时间戳

首页 > 解决方案 > 道具更改时反应子组件不更新

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

问题描述

我正在尝试在 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更改时不会重新呈现？

标签： javascriptreactjs

解决方案

你在你的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
};

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

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

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

推荐阅读