javascript - 使用 axios 不会重新渲染我的 React Native 组件

问题描述

我在 React Native 中使用钩子。这是我的代码：



useEffect(() => {

    if (var1.length > 0 ){


      let sym = [];
      var1.map((items) => {
        let count = 0;
        state.map((stateItems) => {

          if(items === stateItems.name) {
            count = count + 1;
          }

        })

        if (count === 0) {
          sym.push(items)
        }
      });



      async function getAllStates (sym) {
        let stateValues = [];
        await Promise.all(sym.map(obj =>
          axios.get(ServerURL + "/note?name=" + obj).then(response => {
            stateValues.push(response.data[0]);
          })
        )).then(() =>{
          setNewItem(stateValues);
        });

      }


      getAllStates (sym);

    }
    }, [var1]);

useEffect(() => {
      let stateValues = state;
      for( let count = 0 ; count < newItem.length; count++ ){
        stateValues.push(newItem[count]);
      }

      setState(stateValues);

    }, [newItem]);

这成功运行，没有任何错误。但是，当状态显示如下时，我没有看到状态中添加的最新值。它显示所有以前的值。当我刷新整个应用程序时，我能够看到我的附加值。

 return (
    <View style={styles.container}>

    <Text  style = {{color:"white"}}>
        {
          state.map( (item, key) =>{
            return(
              <Text key = {key} style = {{color:"white"}}> {item.name} </Text>
            )
          })
        }
    </Text>
    </View>
  );

有人能告诉我为什么会这样吗？我想在 axios 调用后立即看到数据渲染。我正在使用 React Native。

标签： javascriptreactjsreact-nativeaxiosrendering

当我使用以下命令强制更新时：stackoverflow.com/questions/53215285/...它工作正常。但是，如果有人可以提供，我正在寻找更好的解决方案？

这应该这样做：

useEffect(() => {
  var1.forEach(async (name) => {
    if (state.some(item => item.name === name)) return;

    const response = await axios.get(ServerURL + "/note?name=" + name);

    setState(state => [...state, response.data[0]]);
  });
}, [var1]);

我仍然在您的方法中看到两个问题：

在将 firstz ajax-request 的结果添加到之前，此代码可能会多次启动同一个 ajax 请求state；这也意味着相同的结果name可以多次添加到state.
对于 var1 的每个项目乘以每个状态项目，这是一个问题，或者在这种情况下，O(n*m)基本上很快就会赶上. 您应该在这里找到更好的方法。O(n²)mn

而且我几乎可以肯定，[var1]这里的依赖是错误的useEffect。但是您也需要显示此值的来源以解决此问题。

javascript - 使用 axios 不会重新渲染我的 React Native 组件

问题描述

解决方案

推荐阅读