React native 单击按钮后反应本机平面列表设置值

下面的代码我尝试更改状态值并分配给按钮标题。我一点击按钮，所有的按钮都会改变。我只想更改我单击的一个按钮。 链接如下

从“axios”导入axios；
从“React”导入React；
从“react native”导入{FlatList，Text，Button，View}；
常量应用=（）=>{
const[data，setData]=React.useState（[]）
const[show，setShow]=React.useState（“show”）
const apiffunction=async（）=>{
试一试{
const res=等待axios.get(`https://jsonplaceholder.typicode.com/posts`)
setData（res.data）
}捕获（错误）{
console.log（错误）
}
}
React.useffect（（）=>{
apifunction（）
})
返回(
{
返回(
{item.title}
设置显示（“隐藏”）}/>
)
}}
keyExtractor={item=>item.id}/>
);
}
导出默认应用程序；

在您的情况下，每个数据项的状态都是相同的。您需要获取一个数组，并将其与选定项的索引一起追加

    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;

从“axios”导入axios；
从“React”导入React；
从“react native”导入{FlatList，Text，Button，View}；
常量应用=（）=>{
const[data，setData]=React.useState（[]）；
const[show，setShow]=React.useState（'show'）；
const[selected，setSelected]=React.useState（[]）；
const apiffunction=async（）=>{
试一试{
const res=等待axios.get(`https://jsonplaceholder.typicode.com/posts`);
setData（res.data）；
}捕获（错误）{
console.log（错误）；
}
};
React.useffect（（）=>{
apiffunction（）；
});
返回(
{
返回(
{item.title}
{
const updateItems=[…选定]；
const selectedIndex=updateItems.indexOf（索引）；
如果（已选择索引==-1）{
updateItems.push（索引）；
}否则{
updatedItems.splice（选择索引，1）；
}
已选择的设置（更新）；
}}
/>
);
}}
keyExtractor={（项）=>item.id}
/>
);
};
导出默认应用程序；

    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;