在一定时间后关闭一个弹出窗口并打开另一个弹出窗口

Question

我目前正在尝试为应用制作弹出式教程。我的问题是我需要显示一个弹出窗口，当单击“下一步”按钮时，关闭当前弹出窗口并在一段时间后打开另一个。尝试设置新状态时，当前弹出框正在关闭，但下一个未打开。 我正在使用 react-native-popover-view。 这是我的代码：

const Details = props => {

  const [popoverDetails, setPopoverDetails] = useState([
    {
      mainText: 'popover 1',
      textPopover: 'popover 1',
      visible: false,
    },
    {
      mainText: 'popover 2',
      textPopover: 'popover 2',
      visible: false,
    },
    {
      mainText: 'popover 3',
      textPopover: 'popover 3',
      visible: false,
    },
  ]);

  useEffect(() => {
    setTimeout(() => {
      let tmp = [...popoverDetails];
      tmp[0].visible = true;
      setPopoverDetails(tmp);
    }, 1000);
  }, []);

  const nextTuto = i => {
    console.log('i : ', i);
    let tmp = [...popoverDetails];
    tmp[i].visible = false;
    tmp[i + 1].visible = true;

    setPopoverDetails(tmp)
    console.log('tmp : ', tmp);
    console.log('popverdetails : ', popoverDetails);
  };

  return (
    <View style={{flex: 1}}>
      <Text>Ranking page</Text>

      {popoverDetails.map((pD, i) => (
        <Popover
          isVisible={pD.visible}
          onRequestClose={() => {
            let tmp = [...popoverDetails];
            tmp[i].visible = false;
            setPopoverDetails(tmp);
          }}
          from={
            <TouchableOpacity
              onPress={() => {
                setShowPopover1(true);

                let tmp = [...popoverDetails];
                tmp[i].visible = true;
                setPopoverDetails(tmp);
              }}>
              <Text>{pD.mainText}</Text>
            </TouchableOpacity>
          }>
          <Text>{pD.textPopover}</Text>
          <Button onPress={() => nextTuto(i)} title="Next" />
        </Popover>
      ))}
    </View>
  );
};

tmp 和 popoverDetails 是一样的。我也试过设置一个 setTimeout 但它似乎不起作用。有关如何执行此操作的任何建议？

Answer 1

您似乎不知道如何将其用于状态。 React 状态请参考官方文档。 解决方法如下。

const nextTuto = i => {
    setPopoverDetails((prevArr) => prevArr.map((v,index) => index === i+1 ? ({...v, visible: true }) : ({...v, visible: false }) )   )
  };