Использование установщика состояний в качестве опоры с реактивными крючками

Question

Я пытаюсь понять, является ли передача установщика из useState проблемой или нет.

В этом примере мой дочерний компонент получает и состояние, и установщик для его изменения.

export const Search = () => {
  const [keywords, setKeywords] = useState('');

  return (
    <Fragment>
      <KeywordFilter
        keywords={keywords}
        setKeywords={setKeywords}
      />
    </Fragment>
  );
};

, затем на дочернем элементе у меня что-то вроде:

export const KeywordFilter: ({ keywords, setKeywords }) => {

  const handleSearch = (newKeywords) => {
    setKeywords(newKeywords)
  };

  return (
    <div>
      <span>{keywords}</span>
      <input value={keywords} onChange={handleSearch} />
    </div>
  );
};

Мой вопрос заключается в том, должна ли у меня иметь функцию обратного вызова для родителя для setKeywords, или это нормально для передачи setKeywords и вызова его от дочернего объекта?

Answer 1

Нет необходимости создавать функцию сложения просто для пересылки значений в setKeywords, если только вы не хотите что-то делать с этими значениями перед этим.Например, может быть, вы параноик, что дочерние компоненты могут отправлять вам неверные данные, вы можете сделать:

const [keywords, setKeywords] = useState('');

const gatedSetKeywords = useCallback((value) => {
  if (typeof value !== 'string') {
    console.error('Alex, you wrote another bug!');
    return;
  }
  setKeywords(value);
}, []);

// ...

<KeywordFilter
  keywords={keywords}
  setKeywords={gatedSetKeywords}
/>

Но в большинстве случаев вам не нужно ничего делать, поэтому передавая setKeywordsсам в порядке.

Answer 2

почему бы и нет?

Установщик состояния - это просто функциональное значение с точки зрения пропеллера.И время вызова может быть в любое время, пока соответствующий компонент активен.