小编Tra*_* S.的帖子

我有一个组件，用于显示从Spotify API返回的搜索数据。但是，每次更新状态时，UI都会闪烁：

输入：

            <DebounceInput
                debounceTimeout={300}
                onChange={handleChange}
            />

钩：

const [searchResults, setSearchResults] = useState(null)

带Apollo的API调用：

 const searchSpotify = async (query) => {
    const result = await props.client.query({
        query: SearchTracks,
        variables: {
            query
        }
    })
    const tracks = result.data.searchedTracks
    setSearchResults(tracks)
}

渲染：

        {searchResults &&
            <div className="search-results">
                    {searchResults.map((song) => (
                            <SongInfo key={song.id} {...song} />
                    ))}
            </div>
        }

我注意到它仅在第一次加载时发生。例如，如果我再次键入查询，它将显示而不会闪烁。有没有更好的方法来实现此目的，以使UI不会闪烁？

我有一个子组件，它应该根据带有复选框的可见性过滤器显示名称。我使用字典来跟踪每个名称的选中状态。但是，当我更新字典时，孩子不会更新。

这是一个例子：https : //codesandbox.io/s/8k39xmxl52

这些是组件：

const App = () => {
  const [names, setNames] = useState(seedNames);
  const [hidden, setHidden] = useState(new Map());

  const handleHidden = e => {
    const name = e.target.name;
    const hidden = e.target.checked;

    setHidden(hidden.set(name, hidden));
  };

  return (
    <div className="App">
      <VisibilityFilter
        names={names}
        hidden={hidden}
        handleHidden={handleHidden}
      />
      <DisplayNames names={names} hidden={hidden} />
    </div>
  );
};

const VisibilityFilter = ({ names, hidden, handleHidden }) => {
  return (
    <div>
      {names.map(name => (
        <div key={name}>
          <input
            type="checkbox"
            name={name}
            checked={hidden.get(name)}
            onChange={handleHidden}
            defaultChecked …