如何将代码片段从类组件更改为功能组件

Question

这里是sn-p的代码，我想改成Functional组件，我的代码差不多写到这里了，请查收。

import _ from 'lodash';
import { ListItem, SearchBar, Avatar } from 'react-native-elements';
import { getUsers, contains } from './api/index';

function App(props) {

  const [loading, setLoading] = useState(false);   
  const [data, setData] = useState([]);
  const [error, setError] = useState(null);
  const [fullData, setFullData] = useState([]);
  const [query, setQuery] = useState();

  useEffect(() => {
    makeRemoteRequest();
  },[query]);

  const makeRemoteRequest = _.debounce(() => {
    setLoading(true);
    getUsers(20, query)
      .then((users) => {
        setLoading(false);
        setData(users);
        setFullData(users);
      })
      .catch((error) => {
        setLoading(false);
      });
  }, 250);

  const handleSearch = (text) => {
    const formattedQuery = text.toLowerCase();
    const data = _.filter(fullData, (user) => {
      return contains(user, formattedQuery);
    });
   // I want to change the below code to work on Functioanl component
    //  this.setState({ data, query: text }, () => //this.makeRemoteRequest());
   // New code here.....
          };

我以不同的方式实现它，但不起作用。

Answer 1

你可以有类似下面的东西。

const [query, setQuery] = useState();
const [data, setData] = useState();

useEffect(() => {
  makeRemoteRequest();
}, [query])

阅读更多关于useEffecthere

Answer 2

您正在尝试制作一组​​数据和文本，然后在设置后调用回调。

有几种方法可以获得这种行为。

我建议你有一个包含数据和文本的状态（useState），然后通过useEffect 监听这个阶段的变化。

export default function App() {
  const [request, setRequest] = useState({data: {}, text: ''});
  const makeRemoteRequest = useCallback(() => console.log({request}),[request]);
  
  useEffect(() => {
    //on mount 
    setRequest({data: {obj:'with data'}, text: 'text'})
  },[])

  useEffect(() => {
    makeRemoteRequest()
  },[request,makeRemoteRequest])
  
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
}

你可以在这里看到，它是一个功能组件：

• 设置挂载状态（阅读评论）
• 每次状态request通过useCallback钩子改变时定义一个函数makeRemoteRequest
• 每次状态request或回调makeRemoteRequest通过useEffect挂钩发生变化时调用函数makeRemoteRequest

编辑：

import _ from 'lodash';
import { ListItem, SearchBar, Avatar } from 'react-native-elements';
import { getUsers, contains } from './api/index';

function App(props) {

  const [loading, setLoading] = useState(false);   
  const [data, setData] = useState([]);
  const [error, setError] = useState(null);
  const [fullData, setFullData] = useState([]);
  const [query, setQuery] = useState();

  useEffect(() => {
    makeRemoteRequest();
  },[query]);

  const makeRemoteRequest = _.debounce(() => {
    setLoading(true);
    getUsers(20, query)
      .then((users) => {
        setLoading(false);
        setData(users);
        setFullData(users);
      })
      .catch((error) => {
        setLoading(false);
      });
  }, 250);

  const handleSearch = (text) => {
    const formattedQuery = text.toLowerCase();
    const data = _.filter(fullData, (user) => {
      return contains(user, formattedQuery);
    });
    setData(data);
    setQuery(text);
  }
};

其实你想要的是触发函数makeRemoteRequest，现在你要做的是做正确的设置（这意味着setQuery），这将触发useEffect