如何使用 React Hooks 重写它？

Question

你会如何使用 React Hooks 重写它？

class UsersList extends Component {
  componentDidMount() {
    this.props.fetchUsers();
  }

  renderUsers() {
    return this.props.users.map(user => {
      return <li key={user.id}>{user.name}</li>;
    });
  }

  render() {
    return (
      <div>
        Here's a big list of users:
        <ul>{this.renderUsers()}</ul>
      </div>
    );
  }
}

我尝试使用 React Hooks 重写，但由于某种原因，我没有返回任何呈现在屏幕上的用户。

我试过了：

const UsersList = ({ users }) => {
  useEffect(() => {
    fetchUsers();
  }, [users]);

  const renderUsers = () => {
    console.log(users);
    return (
      <ul>
        {users.map(user => (
          <li key={user.id}> {user.name} </li>
        ))}
      </ul>
    );
  };

  return <div> {renderUsers()}</div>;

但我没有在屏幕上呈现任何内容。 请指出我的明显错误是什么？

Answer 1

你说得几乎是正确的。简单的经验法则是 useEffect 与空数组 [] 与 componentDidMount/componentWillUnmount 相同，因为在空数组中不会发生任何变化，因此该函数只调用一次。此外，您必须将fetchUsers 添加到函数定义的属性列表中才能访问它。

const UsersList = ({ users, fetchUsers }) => {
  useEffect(() => {
    fetchUsers();
  }, []);

  const renderUsers = () => {
    console.log(users);
    return (
      <ul>
        {users.map(user => (
          <li key={user.id}> {user.name} </li>
        ))}
      </ul>
    );
  };

  return <div> {renderUsers()}</div>;
}

Answer 2

React Hooks 与我们的功能组件相关联。钩子是一个函数，可让您利用诸如状态或生命周期方法之类的反应功能。 您必须在要渲染的功能组件中实现 useEffect() 。获取数据后，您必须更改状态。

const renderUsers = () => {
    const [users,setUsers]=useState([]) // initially set to empty array
    useEffect(()=>{
          const fetchedUsers=fetchUsers()
          if(fetchedUsers){
             setUsers(fetchedUsers)}          
},[]) //[] here means fire this func only once
  //now your state set to fetched data
    return (
      <ul>
        {users.map(user => (
          <li key={user.id}> {user.name} </li>
        ))}
      </ul>
    );
  };

  return <div> {renderUsers()}</div>;
}