时间戳

首页 > 解决方案 > React - 将异步数据映射到组件

javascript - React - 将异步数据映射到组件

问题描述

我在这里有一个 API 获取请求，在我的 useEffect 挂钩中挂载时调用，然后设置


const [multilineAccountInfo, setMultilineAccountInfo] = useState([]);

useEffect(() => {
    getMultilineAccountInfo();
    return () => {
      console.log('cleanup home/balance');
    };
  }, []);

const getMultilineAccountInfo = () => {
    axios
      .get('Account/MultiLineAllAccountsInfo')
      .then(response => {
        let parse_response = JSON.parse(response.data);
        let stringified_data = JSON.stringify(parse_response);
        setMultilineAccountInfo(stringified_data);
      })
      .catch(error => {
        console.log('getMultilineAccountInfo error', error);
      });
  };

我面临的问题是，在我的视图中，应用程序崩溃并说“未定义不是函数（靠近'...multilineAccountInfo.map...'）”

const MultilineDetailHome = multilineAccountInfo.map((item, index) => (
    <View key={index}>
      <View style={styles.multilineCards}>
        <View
          style={{
            flexDirection: 'row',
            justifyContent: 'center',
            alignItems: 'center',
          }}>
          <View>
            <Text style={styles.multilineNameText}>
              {item.FirstName + ' ' + item.LastName}
            </Text>
            <Text style={styles.multilinePhoneText}>
              {formatPhoneNumber(item.Pnum)}
            </Text>
          </View>
          <View style={{marginLeft: hp('3%')}}>
            <View
              style={{
                flexDirection: 'row',
                justifyContent: 'center',
                alignItems: 'center',
              }}>
              <Text style={styles.multilineBalanceText}>
                ${item.Balance.toFixed(2)}
              </Text>
            </View>
            <Text style={styles.multilineTypeText}>{item.AccountType}</Text>
          </View>
        </View>
      </View>
    </View>
  ));

我很确定这是因为 setState() 的异步性质以及在调用 .map() 方法之前没有及时返回数据。

我将如何在 .map() 之前等待 API 调用完成并最终在 UI 中呈现视图？

谢谢你的帮助！

标签： javascriptreactjsreact-nativeasync-awaitpromise

解决方案

如果您在加载数据时遇到问题，可以使用以下方法：

multilineAccountInfo.length > 0 ? YOUR COMPONENT : <h1>LOADING</h1>

另一种方法可以使用另一种状态，例如：

[isLoading, setLoading] = useState(true);

然后按照你的async方法设置它。

.then(response => {
        let parse_response = JSON.parse(response.data);
        let stringified_data = JSON.stringify(parse_response);
        setMultilineAccountInfo(stringified_data);
        setLoading(false);
      })

现在您可以在组件渲染部分使用它：

isLoading? Text("Loading"):YOUR COMPONENT

推荐阅读