如何在react native中调用map函数中的Axios API时初始隐藏特定数据

f3temu5u 于 2023-01-25 发布在 iOS

关注(0)|答案(2)|浏览(121)

我想在索引1和2的数据隐藏和所有数据显示在屏幕上，除了这两个数据。我正在使用Map功能显示数据在屏幕上，我的数据来自API调用。这里是我的代码：

const [show, setShow] = useState(true);
axios
  .get('url', {
    headers: {
      'Content-Type': 'application/json',
      Authorization: `Bearer token-key`,
    },
  })
  .then(response => {
    console.log('response', response);
    const data = response.data;
    setData(data);
    console.log('data=\>', data);
    showItem();
  })
  .catch(error => {
    console.log('error', error.response);
  });

const showItem = () => {
  data.map((item, index) => {
    console.log('index of show item', index);
    if (index == 1 || index == 2) {
      const show = false;
      setShow(show);
    } else {
      const show = true;
      setShow(show);
    }
  });
};

我的逻辑不起作用，并且索引1和2处的数据在API调用期间没有隐藏。以下是我的UI部分：

<View style={styles.leftSideView}>
  {data && data.map((item, index) => { return (
  <TouchableOpacity key={item.id} style={styles.leftViewStyle}>
    {show == true ? (
    <Text style={styles.leftView}>{item.name.en}</Text> ) : null}
  </TouchableOpacity>
  ); })}
</View>

axios

来源：https://stackoverflow.com/questions/75203398/how-to-hide-a-particular-data-initially-while-calling-axios-api-in-map-function

2条答案

按热度按时间

vwoqyblh1#

在您的showItem()中，您正在通过数据进行Map，但是当您在最后一项中时设置为true，这使得show始终为true（因为它不是索引1或2）。相反，您可以删除它并更改UI部分，如下所示：

<View style={styles.leftSideView}>
  {data && data.map((item, index) => { return (
  <TouchableOpacity key={item.id} style={styles.leftViewStyle}>
    {index != 1 || index != 2 && (
    <Text style={styles.leftView}>{item.name.en}</Text> )}
  </TouchableOpacity>
  ); })}
</View>

赞(0）回复(0）举报 2023-01-25

1cosmwyk2#

const [show, setShow] = useState(false);
const [data, setData] = useState([]);

useEffect(()=>{
axios
  .get('url', {
    headers: {
      'Content-Type': 'application/json',
      Authorization: `Bearer token-key`,
    },
  })
  .then(response => {
    const data = response.data;
    setData(data);
  })
  .catch(error => {
    console.log('error', error.response);
  });

},[])

如果要显示所有数据，只需setShow(true)

<View style={styles.leftSideView}>
  {data.map((item, index) => { 
  return (
  <TouchableOpacity key={item.id} style={styles.leftViewStyle}>
    { (!show && (index == 1 || index == 2) ) ? '' : <Text style={styles.leftView}>{item.name.en}</Text> }
  </TouchableOpacity>
  ); }) 
}
</View>

赞(0）回复(0）举报 2023-01-25

我来回答

如何在react native中调用map函数中的Axios API时初始隐藏特定数据

2条答案

相关问题

热门标签

最新问答