时间戳

首页 > 解决方案 > 从 API 加载数据时，在反应钩子中设置保存状态时出现问题？

react-native - 从 API 加载数据时，在反应钩子中设置保存状态时出现问题？

问题描述

我的想法是，当有人在我的 TextInput 中输入文本并单击提交时，botToc()会将来自该 API 搜索的数据保存在其中result并result在 FlatList 中显示。

但是我在使用钩子保存数据时遇到问题。问题是我setResult的工作不正常，因为它不能很好地保存来自 API 查询的数据。botToc()应该从 API 获取数据并且它做得很好，但是然后我遍历获取的数据并保存我想要的result使用setResult.

问题是，当我单击使用的按钮时botToc2()（单击使用的按钮后botToc()），我console.log(result)只显示最后一个元素的数据，如果我再次使用botToc()并且再单击一次，我会在数组botToc2()中复制最后一个元素。result

我怎样才能解决这个问题？

export default function TestScreen () {

    const [querypar, setQuerypar] = useState('');
    const [apipar, setApipar] = useState('https://API/search?q=');
    const [result, setResult] = useState([]);

    const ItemView = ({item}) => {
      return (
          <View>
            <Text>
              {item[0]+ '  ' + item[1]}
            </Text>
          </View>
      );
    };

   function botToc() {
      let query = apipar+querypar;  //'https://API/search?q='+'TextInputText'
      let cargador = [];

      fetch(query) //'https://API/search?q=TextInputText'
      .then( res => res.json() )
      .then( res => {
        // (res.results) = [{price:x,title:x},{price:x,title:x},{price:x,title:x}] structure of (res.results)
        (res.results).forEach( (element) => {
            cargador.push(element.title);
            cargador.push(element.price); //cargador=[x,x]
            setResult([...result, ...cargador]); //result=[[x,x],[x,x]...]
            cargador.length = 0; //cargador=[]
        });
      })
   };


   function botToc2() {
    console.log(result); //my console should return [[x,x],[x,x],[x,x],[x,x],[x,x],[x,x],...]
   };

    return (
      <View View style={styles.container}>
        <TextInput placeholder="write here" onChangeText={(val) => setQuerypar(val)} />
        <View>
            <Button onPress={botToc} title="Submit"/>
            <Button onPress={botToc2} title="Submit"/>
            <FlatList
            data={result}
            renderItem={ItemView}
            keyExtractor={(item, index) => index.toString()}
            />
        </View>
      </View>
    );
};

标签： react-nativereact-hooks

解决方案

应避免在forEachsetResult()函数中多次调用。在这种情况下，您的函数应如下所示：botToc()

    function botToc() {
      let query = apipar+querypar;  //'https://API/search?q='+'TextInputText'
      let cargador = [];

      fetch(query) //'https://API/search?q=TextInputText'
      .then( res => res.json() )
      .then( res => {
        // (res.results) = [{price:x,title:x},{price:x,title:x},{price:x,title:x}] structure of (res.results)
        (res.results).forEach( (element) => {
            cargador.push([element.title, element.price]); //cargador=[x,x]
        });
      })
      setResult(cargador);
   };

这应该为您完成这项工作。

推荐阅读