react-native - React Native Hooks - 尝试从类组件重构为函数组件以使用挂钩

Question

我是 react native 的新手，我正在尝试重构下面的代码，我认为我在这里做错了一些事情"setSentences(item)"，因为它没有更新。你知道我在这里做错了什么吗？

this.state = {
      sentences: [],
     };

{this.state.sentences.map((item) => {
  return(
    <TouchableOpacity
       onPress={() => {
       item.selected = false;
       this.setState(item); 
      }}>
</TouchableOpacity>
)}}

重构：

const [sentences, setSentences] = useState([]);

 {sentences.map((item) => {
    return (
      <TouchableOpacity
        onPress={() => {
          item.selected = false;
          setSentences(item);
        }}>
      </TouchableOpacity>

标签： react-nativereact-hooks

Answer 1

要获得明确的解决方案，您必须创建一种这样的方法：

const onItemPress = (itemIndex) => {
  const temp = [].concat(sentences);
  temp[itemIndex].selected = false;
  setSentences(temp);
}

现在，在 TouchableOpacityonPress方法上调用此方法并将当前索引传递给此方法以修改该特定项目状态，如下所示：

{sentences.map((item, itemIndex) => {
  return (
    <TouchableOpacity
      onPress={() => onItemPress(itemIndex)}>
    </TouchableOpacity>
  )
}}

请注意，您的状态应该是：

const [sentences, setSentences] = useState([]);