Реакция 16.13: Невозможно обновить компонент внутри тела функции другого компонента в дочернем обработчике событий - PullRequest
Новая
       10

Реакция 16.13: Невозможно обновить компонент внутри тела функции другого компонента в дочернем обработчике событий

1 голос
/ 05 марта 2020

Я использую React 16.13 и не понимаю, как обойти это предупреждение. Я вызываю функцию setState из обработчика событий дочернего компонента, что означает, что setState не запускается при рендеринге. Я считаю, что это должно быть разрешено согласно документам.

Кто-нибудь знает, как мне добиться этого, что я пытаюсь сделать так, чтобы это хорошо сочеталось с тем, что React намеревался предотвратить здесь? Ссылка Codesandbox: https://codesandbox.io/s/silly-pike-zwvpb?fontsize=14&hidenavigation=1&theme=dark

По просьбе одного комментария я также размещаю здесь код. Обратите внимание, что версия ant - 3.24.1 (но это верно для всех версий Antd <4). когда вы набираете слово «кошка», каждая последующая буква выдает предупреждение для меня. Пожалуйста, извините за уродливое форматирование, поскольку я не включил CSS. </p> 

import React, { useState } from "react";

import { Select } from "antd";
const { Option } = Select;

export const getSelectOptions = options => {
  if (!Array.isArray(options) || options.length === 0) {
    return undefined;
  }

  return options.map(opt => {
    return <Option key={opt}>{opt}</Option>;
  });
};

const SelectWithSearchFilter = props => {
  const { value, data } = props;

  const [filteredList, setFilteredList] = useState([]);

  const handleSearch = searchTerm => {
    console.log(searchTerm);
    if (searchTerm.length < 1) {
      setFilteredList([]);
    } else {
      const newFilteredList = data.filter(item =>
        item.toLowerCase().includes(searchTerm.toLowerCase())
      );
      setFilteredList(newFilteredList);
    }
  };

  return (
    <Select
      value={value}
      showSearch={true}
      size="default"
      // loading={loading}
      // onChange={onChange}
      placeholder="enter something"
      onSearch={handleSearch}
      // mode={mode}
      // allowClear={allowClear}
    >
      {getSelectOptions(filteredList)}
    </Select>
  );
};

const App = () => {
  return (
    <div>
      <SelectWithSearchFilter
        value="alligator"
        data={[
          "alligator",
          "bird",
          "cat",
          "cat2",
          "cat3",
          "dog",
          "cow",
          "monkey"
        ]}
      />
    </div>
  );
};
export default App;
...