reactjs - FlatList 不使用 React Hooks 渲染

Question

我正在尝试通过单击某个项目来重命名 FlatList 中的 [0] 项目，但这对我不起作用，当我单击每个项目时，什么也没有发生，我也没有收到任何错误。我怎样才能解决这个问题？

这是我的代码。

export default function renameSample() {

  const data = [
    {
      id: '1',
      name: 'test1',
    },
    {
      id: '2',
      name: 'test2',
    },
    {
      id: '3',
      name: 'test3',
    },
  ];
  
  const [stateUser, onChangeUser] = useState(data);

  return (
      <FlatList
        data={stateUser}
        renderItem={({item}) =>
          <TouchableOpacity
            onPress={() => {
              let setData = stateUser;
              setData[0].name = 'changed';
              onChangeUser(setData);
            }
            }
          >
            <Item name={item.name} />
          </TouchableOpacity>
        }
        keyExtractor={item => item.id}
      />
    </View>
  );
}

标签： reactjsreact-native

Answer 1

如果您的要求是更改单击的项目，则代码如下所示。您可以获取单击项目的索引并进行更改。

function RenameSample() {
  const data = [
    {
      id: '1',
      name: 'test1',
    },
    {
      id: '2',
      name: 'test2',
    },
    {
      id: '3',
      name: 'test3',
    },
  ];

  const [stateUser, onChangeUser] = useState(data);

  return (
    <View>
      <FlatList
        data={stateUser}
        renderItem={({ item, index }) => (
          <TouchableOpacity
            onPress={() => {
             const newData=[...stateUser];
             newData[index].name = 'changed';
             onChangeUser(newData);
            }}>
            <Item name={item.name} />
          </TouchableOpacity>
        )}
        keyExtractor={(item) => item.id}
      />
    </View>
  );
}