react useEffect 获取数据已完成但返回值未定义答案

【问题标题】：react useEffect fetch data is completed but returning a value is undefinedreact useEffect 获取数据已完成但返回值未定义
【发布时间】：2020-02-19 01:50:49
【问题描述】：

我正在使用useEffect 获取数组数据然后显示项目。当我获取数据时，我可以看到数据已成功获取。

但是当我尝试在view 中显示数据时，它给了我一个错误Cannot read property 'name' of undefined

我认为view 是在获取之前呈现的。但我使用async await 来确保首先调用useEffect。

知道如何在view 中显示数据吗？

任何 cmets 或建议都会非常有帮助。在此先感谢:)

const FetchUsers = () => {

    const [data, setData] = useState([])
    const [loading, setLoading] = useState([])
    const URL = "myurl..."

    useEffect(() => {
        async function fetchData() {
            const res = await axios.get(URL, {headers: {"x-access-token":memberToken}});
            const response = await res;
            console.log(response.data.data,'data')
            //when I console log
            // [{…}, {…}] "data"
            //0: { name: "kevin", age: 39}
            //1: { name: "john", age: 23}
            console.log(response.data.data[0].title, 'name')
            setData(response.data.data);
            setLoading(false);
        }
        fetchData()
    }, [])


  return(

    <View>
      //I am trying to display fetched data  
      <Text>{data[0].name}</Text>
    </View>
    )
  }

【问题讨论】：

标签： javascript reactjs react-native fetch

【解决方案1】：

没有“先调用”。你的组件立即渲染，useEffect 包含一个“副作用”——在你的组件渲染后的某个未知点发生的事情......

因此，data 将在将来的某个时间设置，因此您必须先检查它是否可用，如果不可用，则在其位置渲染一些内容，例如：

return(
 <View>
  <Text>{!data.length ? 'Loading...' : data[0].name}</Text>
 </View>
)

【讨论】：

【解决方案2】：

useEffect() 只会在组件完成渲染并且state 或props 更改时触发。在您的情况下，您在初始渲染时显示 name 属性。这是生命周期，render > useEffect > props/state change？ > useEffect > 渲染。

改用这个：

return (
    <View>
        <Text>{data.length > 0 ? data[0].name : 'Fetching...'}</Text>
    </View>
);

【讨论】：