javascript - React-Slick 不适用于 React 中的首次渲染

Question

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

代码

   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>

Answer 1

我已经设置了code sandbox 。 react-slick 适用于第一次渲染。您只会看到控制台输出 rendering.. 一次。

应用程序

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"
      }
    ]
  }
};

TodoListModal

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>
  );
};

Styles.css

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

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

.green-data {
  background: green;
}