时间戳

首页 > 解决方案 > React Hooks useState useEffect 幻灯片

javascript - React Hooks useState useEffect 幻灯片

问题描述

我正在尝试通过将以下数据传递给Slide.jsvia props 来制作幻灯片应用程序。

const SLIDES = [
    {
        title: "Today's workout plan",
        text: "We're gonna do 3 fundamental exercises."
    },
    {
        title: "First, 10 push-ups",
        text: "Do 10 reps. Remember about full range of motion. Don't rush."
    },
    {
        title: "Next, 20 squats",
        text: "Squats are important. Remember to keep your back straight."
    },
    {
        title: "Finally, 15 sit-ups",
        text: "Slightly bend your knees. Remember about full range of motion."
    },
    {
        title: "Great job!",
        text: "You made it, have a nice day and see you next time!"
    }
];

我的子组件Slide.js具有以下代码

import React, { useState, useEffect } from "react";

function Slides({ slides }) {
  const [slideShow, setSlide] = useState(slides);

  useEffect(() => {
    setSlide(slideShow[0]);
    console.log("slides", slideShow[0]);
  }, []);

  return (
    <div>
      <div id="navigation" className="text-center">
        <button data-testid="button-restart" className="small outlined">
          Restart
        </button>
        <button data-testid="button-prev" className="small">
          Prev
        </button>
        <button data-testid="button-next" className="small">
          Next
        </button>
      </div>
      {slideShow.map((slide, i) => (
        <div id={i} className="card text-center">
          <h1 data-testid="title">{slide.title}</h1>
          <p data-testid="text">{slide.text}</p>
        </div>
      ))}
    </div>
  );
}

export default Slides;

我认为 usingsetSlide(slideShow[0])只会在应用程序最初加载后呈现对象数组中的第一项。但我明白了

TypeError: slideShow.map is not a function

但是当console.log("slides", slideShow[0])我输出

slides {title: "Today's workout plan", text: "We're gonna do 3 fundamental exercises."}

如果我将代码更改为

setSlide(slideShow.slice(0, 1));

该应用程序仅显示数组中的第一个对象，但如果 I console.log("slides", slideShow)，即使我认为我应该收到切片版本，我也会得到整个对象数组。

我的map函数是否没有引用slideShow[0]错误的发生？

标签： javascriptreactjsreact-hooksuse-state

解决方案

这里的问题是setSlide(slideShow[0])。最初，状态是用一个名为 的数组初始化的slides。但是在useEffect那个状态下，正在用一个对象进行更新。所以，现在slideShow不再是一个，array而是一个object。因此object.map正在破坏应用程序。

  useEffect(() => {
    setSlide(slideShow[0]);
    console.log("slides", slideShow[0]);
  }, []);

以下是您正在寻找的操作类型的示例。而不是存储slides在我刚刚添加index项目的状态中state并相应地更新它。

const SLIDES = [{title:"Today's workout plan",text:"We're gonna do 3 fundamental exercises."},{title:"First, 10 push-ups",text:"Do 10 reps. Remember about full range of motion. Don't rush."},{title:"Next, 20 squats",text:"Squats are important. Remember to keep your back straight."},{title:"Finally, 15 sit-ups",text:"Slightly bend your knees. Remember about full range of motion."},{title:"Great job!",text:"You made it, have a nice day and see you next time!"}];

const { useState, useEffect } = React;

function Slides({ slides }) {
  const [selectedIndex, setSelectedIndex] = useState(0);

  const previous = () => {
    if(selectedIndex !== 0) {
      setSelectedIndex(index => index-1);
    }
  }
  
  const next = () => {
    if(selectedIndex !== slides.length - 1) {
      setSelectedIndex(index => index+1);
    }
  }
  
  const restart = () => {
    setSelectedIndex(0);
  }
  
  return (
    <div>
      <div id="navigation" className="text-center">
        <button data-testid="button-restart" className="small outlined" onClick={restart}>
          Restart
        </button>
        <button data-testid="button-prev" className="small" onClick={previous}>
          Prev
        </button>
        <button data-testid="button-next" className="small" onClick={next}>
          Next
        </button>
      </div>
      <div className="card text-center">
        <h1 data-testid="title">{slides[selectedIndex].title}</h1>
        <p data-testid="text">{slides[selectedIndex].text}</p>
      </div>
    </div>
  );
}

ReactDOM.render(<Slides slides={SLIDES}/>, document.getElementById("react"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.0/umd/react-dom.production.min.js"></script>


<div id="react"></div>

注意：在这里，对于所有三个操作，我们可以只使用一个函数，为了简单起见，我创建了三个不同的函数来更新幻灯片索引。

推荐阅读