Javascript React Slick不适用于React中的第一次渲染

我试图在应用程序中添加

React Slick

，但不知何故，我失败了。实际上，我正在应用程序中添加todo，然后在滑块中显示todo列表。当我存储一些todo时，我从服务器获取数据，并在第一次尝试时在滑块中显示它，现在显示，但当我再次尝试时，它会显示。我将分享我的代码。请检查并纠正我的问题

代码

   let settings = {
      dots: true,
      infinite: true,
      speed: 500,
      slidesToShow: 1,
      slidesToScroll: 1,
      className: "slides",
      adaptiveHeight: true
    };

 <Slider {...settings}>
              {this.props.fetchTodos
                ? this.props.fetchTodos.rows.map(item => (
                    <div
                      className={`${
                        item.priority === "P1"
                          ? "red-data"
                          : item.priority === "P2"
                          ? "yello-data"
                          : item.priority === "P3"
                          ? "green-data"
                          : ""
                      } mb-4 `}
                    >
                      <div>{item.title}</div>
                      <div>{item.description}</div>
                      <div className="mt-2">
                        <TodoListModal
                          color={`${
                            item.priority === "P1"
                              ? "light"
                              : item.priority === "P2"
                              ? "light"
                              : item.priority === "P3"
                              ? "light"
                              : ""
                          }`}
                          title={item.title}
                          description={item.description}
                          priority={item.priority}
                          todoId={item.id}
                        />
                      </div>
                    </div>
                  ))
                : ""}
            </Slider>

let设置={
点：是的，
无限：是的，
速度:500,，
幻灯片放映：1，
幻灯片滚动：1，
类名：“幻灯片”，
自适应高度：真
};
{this.props.fetchTodos
？this.props.fetchTodos.rows.map（项=>(
{item.title}
{item.description}
))
: ""}

我已经设置了一个<代码>react slick在第一次渲染时工作。您将只看到一次控制台输出

渲染..

应用程序

import "./styles.css";
import TodoListModal from "./TodoListModal";

class App extends Component {
  state = {
    settings: {
      dots: true,
      infinite: true,
      speed: 500,
      slidesToShow: 1,
      slidesToScroll: 1,
      className: "slides",
      adaptiveHeight: true
    }
  };

  render() {
    const { settings } = this.state;
    console.log("rendering..");

    return (
      <Slider {...settings}>
        {this.props.fetchTodos
          ? this.props.fetchTodos.rows.map(item => (
              <div
                className={`${
                  item.priority === "P1"
                    ? "red-data"
                    : item.priority === "P2"
                    ? "yello-data"
                    : item.priority === "P3"
                    ? "green-data"
                    : ""
                } mb-4 `}
              >
                <div>{item.title}</div>
                <div>{item.description}</div>
                <div className="mt-2">
                  <TodoListModal
                    color={`${
                      item.priority === "P1"
                        ? "light"
                        : item.priority === "P2"
                        ? "light"
                        : item.priority === "P3"
                        ? "light"
                        : ""
                    }`}
                    title={item.title}
                    description={item.description}
                    priority={item.priority}
                    todoId={item.id}
                  />
                </div>
              </div>
            ))
          : ""}
      </Slider>
    );
  }
}

App.defaultProps = {
  fetchTodos: {
    rows: [
      {
        id: "01",
        priority: "P1",
        title: "title P1",
        description: "description P1"
      },
      {
        id: "02",
        priority: "P2",
        title: "title P2",
        description: "description P2"
      },
      {
        id: "03",
        priority: "P3",
        title: "title P3",
        description: "description P3"
      }
    ]
  }
};

---

你能解释一下你的问题吗？当您从服务器获取TODO并且请求失败时，您是否不想显示任何幻灯片？

const TodoListModal = ({ color, title, description, priority, todoId }) => {
  return (
    <div
      style={{
        background: "#bbc",
        border: "5px solid purple",
        margin: "10px",
        padding: "10px"
      }}
    >
      <h2>color: {color}</h2>
      <h4>title: {title}</h4>
      <h4>description: {description}</h4>
      <h4>priority: {priority}</h4>
      <h4>todoId: {todoId}</h4>
    </div>
  );
};

Slider > div {
  background: #bbc;
  width: 400px;
  height: 150px;
}

.red-data {
  background: red;
}
.yello-data {
  background: yellow;
}

.green-data {
  background: green;
}