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

【问题标题】：React - mapping async data to a componentReact - 将异步数据映射到组件
【发布时间】：2021-10-10 17:42:12
【问题描述】：

我在这里有一个 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 中呈现视图？

感谢您的帮助！

【问题讨论】：

标签： javascript reactjs react-native async-await promise

【解决方案1】：

如果你在加载数据时遇到问题，你可以使用这个：

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

【讨论】：