数据添加到状态后渲染子组件

Question

我是 React 新手，我正在开发一个 React Redux 应用程序。当我将新项目添加到状态时，我想呈现显示项目列表的子组件。当前项目列表显示在状态中，新项目也添加到该列表中 (mobileList)。将新项目添加到状态时如何渲染子组件？当前子组件不显示任何内容。

父组件

import React, { useEffect, useState ,ComponentState} from "react";
import { useSelector, useDispatch } from "react-redux";
import { Button, Container, Row, Col, Form } from "react-bootstrap";
import uuid from "react-uuid";
import allActions from '../Actions/index'
import MobileList from './MobileList';

const MobileCreation = () => {
  const dispatch = useDispatch();

  const initialMobileState = {
    id: "",
    modelName: "",
    brand: "",
    year: "",
    price: "",
  };

  const [mobile, setMobile] = useState(initialMobileState);
  const [submitted, setSubmitted] = useState(false);
  const [submitSuccesful, setSubmitSuccesful] = useState(false);

  const handleInputChange = (event) => {
    const { name, value } = event.target;
    setMobile({ ...mobile, [name]: value });
  };

  const saveMobile = (event) => {
    event.preventDefault();
    setSubmitted(true);

    if (mobile.modelName && mobile.brand && mobile.year && mobile.price) {
      var data = {
        Id: uuid(),
        ModelName: mobile.modelName,
        Brand: mobile.brand,
        Year: mobile.year,
        Price: mobile.price,
      };
    }

   dispatch(allActions.MobileActions.save(data));
   setSubmitted(false);
   setMobile(initialMobileState);
  };

  return (
      <>
    <Form onSubmit={saveMobile}>
      <Form.Group controlId="mobile.ModelName">
        <Form.Label>Model Name</Form.Label>
        <Form.Control
          type="text"
          placeholder="Enter model name"
          name="modelName"
          value={mobile.modelName}
          onChange={handleInputChange}
        />
        {submitted && !mobile.modelName && <div>Model name is required</div>}
      </Form.Group>
      <Form.Group controlId="mobile.Brand">
        <Form.Label>Brand Name</Form.Label>
        <Form.Control
          type="text"
          placeholder="Enter Brand name"
          name="brand"
          value={mobile.brand}
          onChange={handleInputChange}
        />
        {submitted && !mobile.brand && <div>Brand name is required</div>}
      </Form.Group>
      <Form.Group controlId="mobile.Year">
        <Form.Label>Year</Form.Label>
        <Form.Control
          type="text"
          placeholder="Enter year"
          name="year"
          value={mobile.year}
          onChange={handleInputChange}
        />
        {submitted && !mobile.year && <div>Year is required</div>}
      </Form.Group>
      <Form.Group controlId="mobile.Price">
        <Form.Label>Price</Form.Label>
        <Form.Control
          type="text"
          placeholder="Enter price"
          name="price"
          value={mobile.price}
          onChange={handleInputChange}
        />
        {submitted && !mobile.price && <div>Price is required</div>}
      </Form.Group>
      <Button variant="primary" type="submit">
        Submit
      </Button>
    </Form>
    <MobileList/>
    </>
  );
};

export default MobileCreation;

子组件

import React, { useEffect } from "react";
import { useSelector, useDispatch ,} from "react-redux";
import Table from 'react-bootstrap/Table'

const MobileList = () => {
  const mobileList = useSelector((state) => state.mobileList);

  return (
    <>
      <Table striped bordered hover size="sm">
        <thead>
          <tr>
            <th>Model Name</th>
            <th>Brand Name</th>
            <th>Year</th>
            <th>Price</th>
          </tr>
        </thead>
        <tbody>{mobileList ? 
             mobileList.map(function(item, i){
            <tr>
                <td>item.ModelName</td>
                <td>item.Brand</td>
                <td>item.Year</td>
                <td>item.Price</td>
            </tr>
            }) :
           <tr>
               <td>No data</td>
           </tr>
        
            }
        </tbody>
      </Table>
    </>
  );
};

export default MobileList;

减速器

const initialMobileListState = {
    mobileList:[]
}


const mobileReducer= (state = initialMobileListState, action) => {
    switch(action.type){
        case "SAVE":
            return {
                ...state,
                mobileList:[...state.mobileList, action.mobile]
            }
        case "FAIL":
            return state 
        default: 
            return state
    }
}

export default mobileReducer

Answer 1

问题出在选择器中的错误值。 你需要使用

state.MobileReducer.mobileList

而不是

state.mobileList