FlatList не отображает с помощью React Hooks

Question

Я пытаюсь переименовать [0] элементов в FlatList, щелкнув какой-либо элемент, но у меня это не работает, когда я нажимаю на каждый элемент, ничего не происходит и я не получаю никаких ошибок. Как я могу это исправить?

Это мой код.

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>
  );
}

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>
  );
}