javascript - 如何以我从 redux 获得的状态保存数据，然后直接渲染而不是使用 .map() 函数？

Question

有人可以帮助我吗？我是 react.js 的新手，想先将数据保存在state中，然后在我从 Redux 获得的div中渲染数据，但不使用.map()函数。我已经发布了我的代码，请检查它。我目前正在使用.map()函数，但我不想使用.map()。我想做这样的事情：

        <CDataTable
        items={showInspectionCarDetails}
        fields={fields}
    />

这是我的完整代码：

import React, { useState, useEffect } from "react";
import { CarAction } from "../../Store/Actions/CarAction";
import {
  Form,
  Button,
} from "react-bootstrap";
import { useDispatch, useSelector } from "react-redux";

const InspectionsForm = () => {

  const dispatch = useDispatch();
  const showInspectionCarDetails = useSelector(state => state.CarReducer.getcarinspectiondetails);

  useEffect(() => {
    dispatch(CarAction.getInspectedCar());

  }, [dispatch]);

  return (
    <div className="flex-row align-items-center inspection-section">
      <div className="my-4">

        <h3>INSPECTIONS</h3>

        {<div className="table-responsive">
          <table className="table">
            <thead>
              <tr>
                <th>Fields</th>
                <th>Original</th>
                <th>Repaint</th>
                <th>PR</th>
                <th>N/C</th>
              </tr>
            </thead>
            <tbody>
              {showInspectionCarDetails.map((item) => {
                return (
                  <tr key={item.id}>
                    <td>{item.name}</td>
                    <td>
                      <Form.Check
                        className="radio-size"
                        type="radio"
                        aria-label="radio 1"
                        value="original"
                        name="field"
                      />
                    </td>
                    <td>
                      <Form.Check
                        className="radio-size"
                        type="radio"
                        aria-label="radio 1"
                        value="repaint"
                        name="field"
                      />
                    </td>
                    <td>
                      <Form.Check
                        className="radio-size"
                        type="radio"
                        aria-label="radio 1"
                        value="PR"
                        name="field"
                      />
                    </td>
                    <td>
                      <Form.Check
                        className="radio-size"
                        type="radio"
                        aria-label="radio 1"
                        value="N/C"
                        name="field"
                      />
                    </td>
                  </tr>
                )
              })}

            </tbody>
          </table>
        </div>}

        {<div className="container-buttons">
          <Button className="mr-4" variant="light">
            Submit
          </Button>

          <Button variant="dark">Clear</Button>
        </div>}
      </div>

    </div>
  );
};

export default InspectionsForm;

标签： javascriptreactjsreduxreact-redux

Answer 1

要回答您的第一个问题，您可以传递一个参数useState(initialState)来初始化状态。

然后根据需要使用该状态。您没有指定要如何使用该状态，但看起来您可能正在构建一个表单，因此您可以编写一个 onChange 处理程序来更新状态。

关于您的第二个问题，您最终将不得不使用.map()来遍历您的 items 数组并呈现行。但我们可以将您的桌子拆分为多个组件，以便于管理。

import React, { useState, useEffect } from 'react';
import { CarAction } from '../../Store/Actions/CarAction';
import { Form, Button } from 'react-bootstrap';
import { useDispatch, useSelector } from 'react-redux';

const InspectionsForm = () => {
  const dispatch = useDispatch();
  const showInspectionCarDetails = useSelector((state) => state.CarReducer.getcarinspectiondetails);

  const [state, setState] = useState(showInspectionCarDetails);

  const handleChange = (items) => setState(items);

  useEffect(() => {
    dispatch(CarAction.getInspectedCar());
  }, [dispatch]);

  return (
    <div className="flex-row align-items-center inspection-section">
      <div className="my-4">
        <h3>INSPECTIONS</h3>

        <DataTable items={state} onChange={handleChange} />

        <div className="container-buttons">
          <Button className="mr-4" variant="light">
            Submit
          </Button>
          <Button variant="dark">Clear</Button>
        </div>
      </div>
    </div>
  );
};

const DataTable = (props) => {
  const handleChange = (item) => {
    const index = props.items.findIndex((el) => el.id === item.id);
    const items = [...props.items.slice(0, index), item, ...props.items.slice(index + 1)];
    props.onChange(items);
  };

  return (
    <div className="table-responsive">
      <table className="table">
        <thead>
          <tr>
            <th>Fields</th>
            <th>Original</th>
            <th>Repaint</th>
            <th>PR</th>
            <th>N/C</th>
          </tr>
        </thead>
        <tbody>
          {props.items.map((item) => (
            <Row key={item.id} item={item} onChange={handleChange} />
          ))}
        </tbody>
      </table>
    </div>
  );
};

const Row = (props) => {
  const handleChange = (key, value) => {
    props.onChange({
      ...props.item,
      [key]: value,
    });
  };

  return (
    <tr>
      <td>{item.name}</td>
      <td>
        <Form.Check
          className="radio-size"
          type="radio"
          aria-label="radio 1"
          value={item.original}
          onChange={(value) => handleChange('original', value)}
          name="field"
        />
      </td>
      <td>
        <Form.Check
          className="radio-size"
          type="radio"
          aria-label="radio 1"
          value={item.repaint}
          onChange={(value) => handleChange('repaint', value)}
          name="field"
        />
      </td>
      <td>
        <Form.Check
          className="radio-size"
          type="radio"
          aria-label="radio 1"
          value={item.PR}
          onChange={(value) => handleChange('PR', value)}
          name="field"
        />
      </td>
      <td>
        <Form.Check
          className="radio-size"
          type="radio"
          aria-label="radio 1"
          value={item['N/C']}
          onChange={(value) => handleChange('N/C', value)}
          name="field"
        />
      </td>
    </tr>
  );
};

export default InspectionsForm;