React-Slick не работает над первым рендерингом в React - PullRequest
Новая
       21

React-Slick не работает над первым рендерингом в React

1 голос
/ 31 октября 2019

Я пытаюсь добавить React-Slick в приложении, но каким-то образом я потерпел неудачу, на самом деле я добавляю 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>

1 Ответ

0 голосов
/ 31 октября 2019

Я установил кодовую песочницу . 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;
}
...