Question

我正在使用axios库通过json服务器从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是异步的，与Class组件中的setState相同。由于它的异步特性，您无法记录任何内容-在useState实际执行任何操作之前先执行日志。

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

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

然后返回

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

但是您可以将道具从父对象传递给子对象，而无需在子组件中设置状态。

希望这会有所帮助！

从axios提取数据时反应挂钩的useState（）方法的奇怪行为

1 个答案: