javascript - 将值传递给使用 Hooks 的组件

Question

通过组件传递函数的最佳方式是什么，以及如何回调？

这是ListContainer.jsx

import React, { useEffect, useState } from 'react';

// Internal
import Results from '../Results';
import List from '../List';


const ListContainer = () => {

  const [results, setResults] = useState([]);

  useEffect(() => {
    fetchData();
  }, []);

  const fetchData = (countryISO3) => {
    // fetch data and store in countries
  };

  return (
    <>
      <Results />
      {results && (
        <>
          <List items={results} />
        </>
      )}
    </>
  );
}

export default ListContainer;

这是 Results.jsx 组件。

const Results = (props) => {

  const [results, setResults] = useState([]);

  const handleChange = (event) => {
    // useCallback(event.target.value) ?
  };

  const loadResults = () => {
    // fetch results;
  };

  useEffect(() => {
    loadResults();
  }, []);

  return (
    <>
      {results.map(result => (
        {result.name}
      ))}
    </>
  );
}

export default Results;

Answer 1

因此，您需要将 fetch 函数从 ListContainer 向下传递到Results组件，以便可以在 onSelect 中调用它事件。

更改<Results />至<Results fetch={fetchData} />

然后在你的Results中组件，handleChange应该看起来像这样:

const handleChange = (event) => {
  setOrigin(event.target.value)
  if (event.length.value.length > 0) props.fetch(event.target.value)
};

这应该可以解决您的问题。

您可以通过消除 fetch 来进一步改进此实现。函数，但这超出了这个问题的范围。