道具更改時反應子組件不更新

Question

我正在嘗試在 React 中構建一個本地搜索，該搜索由一個帶有搜索輸入的父組件和一個包含搜索結果列表的子組件組成。 我創建了一個包含搜索查詢和搜索結果列表的 React state object。 當輸入字段更改時，將運行搜索以生成新的結果集，並且兩個屬性（查詢和結果）都會更新。 搜索輸入正在按預期更新，但盡管對其 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>
  );
};

我的問題是：當searchState.results發生變化時，為什么 SearchResults 組件沒有重新呈現？

Answer 1

您在 handleChange function 中改變了handleChange object。該組件不會重新呈現，因為searchState仍然是上一個呈現周期中的相同 object 引用。

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

你不應該直接改變 state object。 使用功能性 state 更新並將現有 state 淺拷貝到新的 state object 參考中。 然后更新您要更新的屬性。

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

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