从 axios 获取数据时反应钩子的 useState() 方法的奇怪行为

Question

我正在使用axios库通过json-server从json文件中获取数据。 当我在单个组件中加载和使用响应对象时，它运行良好。但是当我将此响应对象从父组件传递给子组件时，它不会加载数据。也没有收到任何错误，有人可以帮助我了解差异以及我的方法有什么问题吗？

//Scenario-1 : working perfectly fine:
import React, { useState, useEffect } from 'react';
import Display from './Display';
import Note from './note'
import axios from 'axios';
const App = () => { 
  const [notes, setNotes] = useState([])
  const hook = () => {
      axios.get('http://localhost:3001/notes')
        .then(response => {
        setNotes(response.data)
      })
  }
  useEffect(hook, [])
  return (
    <div>     
        {notes.map(n => <Note key={n.id} note={n} />)}
    </div>
  )
}
export default App;

//Scenario-2 : Not working as expected, also no errors.
const Display = (props) => {    
    //Receiving data here, can see the values in console.
    console.log('inside display, props.notex: ', props.notex); 
    const [notes, setNotes] = useState(props.notex);
    //Blank object, why useState() method is not setting the value of "notes" from "props.notex".
    console.log('inside display, notes: ', notes); 
    const generateRows = () => {
        console.log('generateRows: ', notes)
        return (
            notes.map(n => <Note key={n.id} note={n} />)
        )
    }
    return (
        <div>            
            <ul>
                {generateRows()}
            </ul>           
        </div>
    )
}
const App = () => { 
  const [notes, setNotes] = useState([])
  const hook = () => {
      axios.get('http://localhost:3001/notes')
        .then(response => {
        setNotes(response.data)
      })
  }
  useEffect(hook, [])
   return (
    <div>                            
        <Display notex={notes} />        
    </div>
  )
}
export default App;

Answer 1

我的猜测是useState是异步的，与类组件中的setState相同。由于其异步性质，您无法记录任何内容 - 日志在 useState 实际执行任何操作之前执行。

如果你真的想这样做，你可以将useState的值初始化为一个空数组，并设置一个useEffect钩子，props.notex在你的依赖数组中，如下所示：

useEffect(() => {
  if (props.notex) setNotes(props.notex)
}, [props.notex])

然后在返回

return (
        <div>            
            <ul>
                {notes.length && generateRows()}
            </ul>           
        </div>
    )

但是你可以只将 props 从父组件传递到子组件，而无需在子组件中设置状态。

希望这有帮助！