SetState不适用于服务器中的数据

Question

嗨，我正在用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)
            }
        )
    }, [])

来自服务器的数据

Answer 1

setWorkouts 是async方法，因此您将无法在其下获取更新的数据。

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

否则您的代码是好的，如果您循环并显示它，它将反映在DOM中

运行下面的代码片段，并检查HTML和console两者，这将清除流程。

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>