SetState 不适用于来自服务器的数据

IT技术 reactjs axios react-hooks
2021-04-29 08:18:43

嗨，我正在使用 React 钩子编写一个页面，我正在尝试将从服务器获取的数据设置为状态。不知何故它不起作用。我从服务器获取数据，但无法将其映射到状态。任何想法可能是什么问题？

const [workouts, setWorkouts] = React.useState([]);
useEffect(() => {
        apiGet(fitnessaryEndPoints.workouts.getAllWorkouts)
            .then(
                response => {
                    setWorkouts([...workouts, response.data])
                    console.log(response)
                    console.log(workouts)

                }
            ).catch(
            error => {
                console.log(error)
            }
        )
    }, [])

来自服务器的数据

1个回答

setWorkouts是异步方法，因此您不会在其下方获得更新的数据。

setWorkouts([...workouts, response.data])
console.log(workouts) //<--- this will not reflect the updated data

否则你的代码很好，如果你循环显示它，它会反映在 DOM 中

运行下面的代码片段并检查 HTML 和控制台，这将清除流程。

const { useState , useEffect } = React;

const App = () => {

  const [users,setUsers] = useState(['Vivek' , 'Darsh']);

  useEffect(() => {
    setTimeout(() => {
      setUsers([...users, "Vivan" , "Darshita"]);
      console.log(users);
    },2000);
  },[]);

  return (
    <div>
      { users.map(user => <p>{user}</p>) }
    </div>
  );
}

ReactDOM.render(<App />, document.getElementById('react-root'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<div id="react-root"></div>

其它你可能感兴趣的问题
上一篇Gatsby 如何在 React 组件和之前生成的静态 HTML 内容之间共享 React 标头 下一篇嵌入 Spring MVC/Rest 的 React 应用：浏览器 GET 请求路由