将基于类的组件转换为基于功能的组件并使用react钩子

Question

我正在学习ReactJ，我正在尝试将下面基于类的组件实现为功能组件，但我在其中遇到了困难。当我将它实现到功能组件中时，它不会更新网页。

我已经从获取数据的地方导入了一个对象--碟子。我正在尝试使用功能组件来设置状态。

下面我附加了一些代码，我尝试使用这些代码来设置状态

   class Main extends Component {
            constructor(props) {
                super(props);
                this.state = {
                    dishes: DISHES,
                    selectedDish: null,
                };
            }
        
            onDishSelect(dishId) {
                this.setState({ selectedDish: dishId });
            }
        
            render() {
                return (
                    <div>
                        <Navbar dark color="primary">
                            <NavbarBrand href="./" className="mx-5">
                                Ristorante De Confusion
                            </NavbarBrand>
                        </Navbar>
                        <Menu dishes={this.state.dishes} onClick={(dishId) => this.onDishSelect(dishId)} />
                        <Dishdetail
                            dish={this.state.dishes.filter((dish) => dish.id === this.state.selectedDish)[0]}
                        />
                    </div>
                );
            }
        }
        
        export default Main;

这是我想要改变的

import React, { useState } from "react";
import { Navbar, NavbarBrand } from "reactstrap";
import Menu from "./Menu";
import Dishdetail from "./Dishdetail";
import { DISHES } from "../shared/dishes";

function Main() {
    const [dishes] = useState({ DISHES });
    const [selectedDish, updatedDish] = useState(null);

    function onDishSelect(dishId) {
        return updatedDish((selectedDish) => ({
            ...selectedDish,
            selectedDish: dishId,
        }));
    }

    return (
        <div>
            <Navbar dark color="primary">
                <NavbarBrand href="./" className="mx-5">
                    Ristorante De Confusion
                </NavbarBrand>
            </Navbar>
            <Menu dishes={dishes} onClick={(dishId) => onDishSelect(dishId)} />
            <Dishdetail dish={dishes.filter((dish) => dish.id === selectedDish)[0]} />
        </div>
    );
}

export default Main;

Answer 1

用最少的，例如，你给它会是一样的，编辑道具的要求和使用.

function Main(props) {
  const [state, setState] = useState({
    selectedDish: null,
    dishes: DISHES, // it's not clear from where it is referred `props.Dishes` if from props
  });

  function onDishSelect(dishId) {
    setState({ ...state, selectedDish: dishId });
  }

  return (
    <div>
      <Navbar dark color="primary">
        <NavbarBrand href="./" className="mx-5">
          Ristorante De Confusion
        </NavbarBrand>
      </Navbar>
      <Menu dishes={state.dishes} onClick={(dishId) => onDishSelect(dishId)} />
      <Dishdetail
        dish={state.dishes.filter((dish) => dish.id === state.selectedDish)[0]}
      />
    </div>
  );
}

export default Main;

Answer 2

问题

问题似乎在onDishSelect处理程序中，它在嵌套属性中嵌套盘id。

const [selectedDish, updatedDish] = useState(null);

function onDishSelect(dishId) {
  return updatedDish((selectedDish) => ({
    ...selectedDish,
    selectedDish: dishId, // <-- nested
  }));
}

并且在呈现以筛选dishes数组时没有正确地访问嵌套属性。

state.dishes.filter((dish) => dish.id === state.selectedDish)[0]

解决方案

只需将selectedDish设置为传递的dishId值即可。

const [selectedDish, updatedDish] = useState(null);

function onDishSelect(dishId) {
  updatedDish(dishId);
}

使用Array.prototypt.filter查找并返回匹配的元素对象，而不是返回需要访问第0元素的数组。

state.dishes.find((dish) => dish.id === state.selectedDish)

也不需要将DISHES数组存储在本地状态，只需在组件中直接引用它。

import React, { useState } from "react";
import { Navbar, NavbarBrand } from "reactstrap";
import Menu from "./Menu";
import Dishdetail from "./Dishdetail";
import { DISHES } from "../shared/dishes";

function Main() {
  const [selectedDish, updatedDish] = useState(null);

  function onDishSelect(dishId) {
    updatedDish(dishId);
  }

  return (
    <div>
      <Navbar dark color="primary">
        <NavbarBrand href="./" className="mx-5">
          Ristorante De Confusion
        </NavbarBrand>
      </Navbar>
      <Menu
        dishes={DISHES}
        onClick={(dishId) => onDishSelect(dishId)}
      />
      <Dishdetail dish={DISHES.find((dish) => dish.id === selectedDish)} />
    </div>
  );
}

Answer 3

问题是您没有完全理解useState钩子。它实质上为您提供了两个变量：

The state variable itself
A set method for the state variable

下面是如何实际设置状态变量：

const [dishes, setDishes] = useState(DISHES)
const [selectedDish, setSelectedDish] = useState(null)

const selectADish = dishId => setSelectedDish(dishId)

至于访问状态，您不再编写

this.state.dishes

相反，您只需编写dishes，因为这是函数组件范围内的变量。