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

Posted 2023-02-25

【中文标题】React-Slick 不适用于 React 中的第一次渲染

【英文标题】：React-Slick is not work on first rendering in React

【发布时间】：2019-10-31 10:08:14

【问题描述】：

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

代码

   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】：

我已经设置了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;