javascript - React-Slick は、React での最初のレンダリングでは機能しません

Question

アプリケーションに追加しようとしてReact-Slickいますが、どういうわけか実際には失敗しました。アプリケーションに todo を追加し、スライダーに todos リストを表示しています。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>