React状态似乎未更新

oknrviil 于 2023-03-13 发布在 React

关注(0)|答案(3)|浏览(124)

我正在第一次创建React Native应用程序。
我做了一个JourneyScreen组件，它将用于显示到目的地的方向。我正在调用我的API，它将返回方向，但由于我目前正在测试驱动这个组件，API调用的结果被模拟，我可以看到它模拟的结果很好，所以我还不担心axios请求。
我的问题是，当我调用setDirections时，我不确信值正在被更改。

import React, { useEffect, useState } from 'react';
import { Button, Text, View, TouchableOpacity } from 'react-native';
import axios from 'axios';
import Leg from './leg';

export default function JourneyScreen({
  navigation,
  startLocation,
  endLocation,
}) {
  const [directions, setDirections] = useState({});

  useEffect(() => {
    console.log('Directions: ', directions);
  }, [directions]);

  useEffect(() => {
    const getDirections = async (startLocation, endLocation) => {
      const result = await axios.get('https://localhost:3000');
      console.log('result: ', result);
      setDirections(result);
    };

    getDirections(startLocation, endLocation);
  }, [startLocation, endLocation]);

  return (
    <>
      <Text>{`Directions: ${directions}`}</Text>
      <Text>Directions</Text>
      <Leg />
    </>
  );
}

当i console.log产生useEffect时，我得到预期的API响应。
当i console.log在我的返回块中directions的内容时，我可以看到它仍然只是一个空对象，这意味着它还没有被设置为result的内容。

EDIT* 我添加了useEffect，只是为了跟踪和记录directions，仍然得到相同的结果。

有人知道这是为什么吗？

react-native

来源：https://stackoverflow.com/questions/75628563/react-state-not-seeming-to-update

3条答案

按热度按时间

kwvwclae1#

既然你没有分享你的调试方式。我相信这是一个asynchronous的问题。
useState不同步工作，您需要等待以侦听此更改。
同样，在代码中，您使用了async，但在调用函数时，您没有使用waiting。
所以你需要把await。
如果你想检查directions的状态，你可以用useEffect来监听，如下所示：

React.useEffect(() => {
    console.log('Directions: ', directions);
  }, [directions]);

因此，无论何时方向的值发生变化，您都可以听到变化后的值。
但是，请始终记住，异步函数/行为等
编辑：我还注意到代码中的{console.log('directions: ', directions)}值，但您不应该将console.log放在JSX中。
您可以改为：<Text>{Directions: ${directions}}</Text>
如果我误解了你的问题，请告诉我，这样我们就可以深入研究：）

赞(0）回复(0）举报 2023-03-13

tjvv9vkg2#

1.您的代码将无法工作，因为您试图呈现控制台日志返回。如果您想检查值，您可以在返回值之前记录，它将在每个组件呈现后调用，或者您可以在directions上执行额外的useEffect侦听，并在每次更改后记录值。
1.如果你在某处调用API，请使用try-catch;）

赞(0）回复(0）举报 2023-03-13

h6my8fg23#

useState setter函数异步地更新状态。2你不能保证setter之后的下一行会有更新的值。
您始终可以使用useEffect订阅对变量的更新，以便在dependency数组中使用该变量来对值的更改执行操作

const [val, setVal] = 0;

useEffect(() => {
 // function will trigger when val has been updated to new value
}, [val])

const incrementVal = () => {
  setVal(val + 1);
  
  console.log(val) // probably still updating because it is asynchronous, will most likely show old value
}

赞(0）回复(0）举报 2023-03-13

我来回答

React状态似乎未更新

3条答案

相关问题

热门标签

最新问答