Reactjs React native-如何使用挂钩而不是'；这个州'；？

好的，我有一个小吃，我正试图转换成使用功能组件/挂钩。我不熟悉钩子的逻辑，需要澄清一下

我正在使用这个库并设置如下效果：

this.carouselRef= React.createRef();
    this.state = {
      activeIndex: 0,
      carouselItems: [
        {
          title: 'Item 1',
          text: 'Text 1',
        },
        {
          title: 'Item 2',
          text: 'Text 2',
        },
        {
          title: 'Item 3',
          text: 'Text 3',
        },
        {
          title: 'Item 4',
          text: 'Text 4',
        },
        {
          title: 'Item 5',
          text: 'Text 5',
        },
      ],
    };
  }

  _onPressCarousel = (index) => {
    // here handle carousel press
    this.carouselRef.current.snapToItem(index);
  };

  _renderItem = ({ item, index }) => {
    return (
      <TouchableOpacity
        onPress={() => {
          this._onPressCarousel(index);
        }}
        style={{
          backgroundColor: 'white',
          borderRadius: 20,
          height: 300,
          padding: 50,
        }}>
        <Text style={{ fontSize: 30 }}>{item.title}</Text>
        <Text>{item.text}</Text>
      </TouchableOpacity>
    );
  };

例如，使用

const [activeIndex, setActiveIndex] = useState(0);

---

下面是您的示例代码，其中包含hooks实现

import React, { useState, useEffect } from 'react';
import {
  Text,
  View,
  SafeAreaView,
  Dimensions,
  TouchableOpacity,
} from 'react-native';

import Carousel from 'react-native-snap-carousel';

const SliderWidth = Dimensions.get('screen').width;

export default function App() {
  const [activeIndex, setActivateIndex] = useState(0); 
  const [carouselState, setCarouselState] = useState([
        {
          title: 'Item 1',
          text: 'Text 1',
        },
        {
          title: 'Item 2',
          text: 'Text 2',
        },
        {
          title: 'Item 3',
          text: 'Text 3',
        },
        {
          title: 'Item 4',
          text: 'Text 4',
        },
        {
          title: 'Item 5',
          text: 'Text 5',
        },
      ],
    );

  const _onPressCarousel = (index) => {
    // here handle carousel press
    this.carouselRef.current.snapToItem(index);
  };

  const _renderItem = ({ item, index }) => {
    return (
      <TouchableOpacity
        onPress={() => {
          this._onPressCarousel(index);
        }}
        style={{
          backgroundColor: 'white',
          borderRadius: 20,
          height: 300,
          padding: 50,
        }}>
        <Text style={{ fontSize: 30 }}>{item.title}</Text>
        <Text>{item.text}</Text>
      </TouchableOpacity>
    );
  };

  return (
    <SafeAreaView
      style={{ flex: 1, backgroundColor: 'rebeccapurple', paddingTop: 50 }}>
      <View
        style={{ flex: 1, flexDirection: 'row', justifyContent: 'center' }}>
        <Carousel
          layout={'default'}
          ref={this.carouselRef}
          data={carouselState}
          sliderWidth={SliderWidth}
          itemWidth={300}
          renderItem={this._renderItem}
          useScrollView
          onSnapToItem={(index) => setActivateIndex(index)}
          activeSlideAlignment="center"
        />
      </View>
    </SafeAreaView>
  );
  
}

import React，{useState，useffect}来自“React”；
进口{
文本，
看法
安全区域视图，
尺寸，
可触摸不透明度，
}从“反应本机”；
从“react native snap Carousel”导入转盘；
const SliderWidth=维度.get（'screen'）.width；
导出默认函数App（）{
常数[activeIndex，setActivateIndex]=useState（0）；
const[carouselState，setCarouselState]=useState([
{
标题：“项目1”，
文本：“文本1”，
},
{
标题：“项目2”，
文本：“文本2”，
},
{
标题：“项目3”，
文本：“文本3”，
},
{
标题：“项目4”，
文本：“文本4”，
},
{
标题：“项目5”，
文本：“文本5”，
},
],
);
常数按转盘=（索引）=>{
//这里有把手转盘压力机
此.carouselRef.current.snapToItem（索引）；
};
常量_renderItem=（{item，index}）=>{
返回(
{
点击转盘（索引）；
}}
风格={{
背景颜色：“白色”，
边界半径：20，
身高：300，
填充：50，
}}>
{item.title}
{item.text}
);
};
返回(
setActivateIndex（索引）}
activeSlideAlignment=“中心”
/>
);
}

您不必将所有状态变量声明为一个声明。您可以将它们分成若干部分，并单独使用和操作

---

希望它能起作用。

是的，但是我如何使用类似于this.state的示例（它是一个字典/具有多个属性）来实现这一点呢？通过这样做，您就是在操作主数据转盘。你应该把它们分开。检查下面我的答案@空中人

import React, { useState, useEffect } from 'react';
import {
  Text,
  View,
  SafeAreaView,
  Dimensions,
  TouchableOpacity,
} from 'react-native';

import Carousel from 'react-native-snap-carousel';

const SliderWidth = Dimensions.get('screen').width;

export default function App() {
  const [activeIndex, setActivateIndex] = useState(0); 
  const [carouselState, setCarouselState] = useState([
        {
          title: 'Item 1',
          text: 'Text 1',
        },
        {
          title: 'Item 2',
          text: 'Text 2',
        },
        {
          title: 'Item 3',
          text: 'Text 3',
        },
        {
          title: 'Item 4',
          text: 'Text 4',
        },
        {
          title: 'Item 5',
          text: 'Text 5',
        },
      ],
    );

  const _onPressCarousel = (index) => {
    // here handle carousel press
    this.carouselRef.current.snapToItem(index);
  };

  const _renderItem = ({ item, index }) => {
    return (
      <TouchableOpacity
        onPress={() => {
          this._onPressCarousel(index);
        }}
        style={{
          backgroundColor: 'white',
          borderRadius: 20,
          height: 300,
          padding: 50,
        }}>
        <Text style={{ fontSize: 30 }}>{item.title}</Text>
        <Text>{item.text}</Text>
      </TouchableOpacity>
    );
  };

  return (
    <SafeAreaView
      style={{ flex: 1, backgroundColor: 'rebeccapurple', paddingTop: 50 }}>
      <View
        style={{ flex: 1, flexDirection: 'row', justifyContent: 'center' }}>
        <Carousel
          layout={'default'}
          ref={this.carouselRef}
          data={carouselState}
          sliderWidth={SliderWidth}
          itemWidth={300}
          renderItem={this._renderItem}
          useScrollView
          onSnapToItem={(index) => setActivateIndex(index)}
          activeSlideAlignment="center"
        />
      </View>
    </SafeAreaView>
  );
  
}