Question

以下代码我正在尝试更改状态值并分配给按钮标题。一旦我单击按钮中的所有按钮更改。我只想更改我单击的一个按钮。链接如下https://snack.expo.io/@lijojohnrb/flatlist-events?fbclid=IwAR1jq3rGnVCNbAe8j2JcSuZNDxm6DsDSlvMabB-0u91j0ZCAqDvvDIELd5U

import axios from 'axios';
import React from 'react';
import { FlatList,Text,Button,View } from 'react-native';
const App = () => {
const [data,setData] = React.useState([])
const [show,setShow] = React.useState("show")

const apifunction = async()=>{
 try {
   const res = await axios.get(`https://jsonplaceholder.typicode.com/posts`)
   setData(res.data)
  } catch (error) {
   console.log(error)
  }
}
 React.useEffect(()=>{
   apifunction()
 })
 return (
 <View style={{marginTop:50,marginHorizontal:20}}>
  <FlatList
  data={data}
  renderItem={({item})=>{
   return (
     
  <View>
     <Text>{item.title}</Text>
    <Button  
    style={{
      width:20
    }}
    title={show} onPress={()=>setShow("hide")}/>
  </View>
   )
  }}
  keyExtractor={item=>item.id}/>
 </View>
   );
}
 
export default App;

Answer 1

在您的情况下，此状态对于每个数据项都是相同的。您需要获取一个数组并将其附加到所选项目的索引。

    import axios from 'axios';
    import React from 'react';
    import { FlatList, Text, Button, View } from 'react-native';
    const App = () => {
      const [data, setData] = React.useState([]);
      const [show, setShow] = React.useState('show');
      const [selected, setSelected] = React.useState([]);

      const apifunction = async () => {
        try {
          const res = await axios.get(`https://jsonplaceholder.typicode.com/posts`);
          setData(res.data);
        } catch (error) {
          console.log(error);
        }
      };
      React.useEffect(() => {
        apifunction();
      });
      return (
        <View style={{ marginTop: 50, marginHorizontal: 20 }}>
          <FlatList
            data={data}
            renderItem={({ item, index }) => {
              return (
                <View>
                  <Text>{item.title}</Text>
                  <Button
                    style={{
                      width: 20,
                    }}
                    title={selected.indexOf(index) !== -1 ? 'hide' : 'show'}
                    onPress={() => {
                      const updatedItems = [...selected];
                      const selectedIndex = updatedItems.indexOf(index);

                      if (selectedIndex === -1) {
                        updatedItems.push(index);
                      } else {
                        updatedItems.splice(selectedIndex, 1);
                      }
                      setSelected(updatedItems);
                    }}
                  />
                </View>
              );
            }}
            keyExtractor={(item) => item.id}
          />
        </View>
      );
    };

    export default App;

单击按钮后反应本机平面列表 setValue

1 个答案: