商店更改时，组件未正确更新

Question

我正在开发一个React应用程序，并且触发后按一个新行时，数据无法正确显示，但是与之关联的数据未显示在正确的索引上。

|这里| 232 |

现在，当我触发仅向存储数组中添加元素的按钮之后，“ HERE”字符串位于索引232，我在233处看到“ HERE”字符串，这是不正确的，因为这里应保留其索引。 >

我尝试了一些不同的方法：purecomponents，将数据从存储复制到组件状态。

 <table border="2">
              {this.props.chapters.map((chapter, index) => {
                return <TableRow chapter={chapter} key={index} />;
              })}
            </table>

TableRow

import React, { Component, Fragment } from "react";

class TableRow extends Component {
  state = {
    title: ""
  };
  static getDerivedStateFromProps(nextProps, prevState) {
    return {
      title: nextProps.chapter.title,
      id: nextProps.chapter.id
    };
  }
  render() {
    return (
      <Fragment>
        <tr>
          <td>
            <input
              type="text"
              value={this.state.title}
              onChange={e => {
                this.setState({ ...this.state, title: e.target.value });
              }}
            />
          </td>
          <td>{this.state.id}</td>
          <td>{this.props.exposure}</td>
        </tr>
      </Fragment>
    );
  }
}

export default TableRow;

Reducer，但是POST_CHAPTER工作正常，数组已正确调度，问题是React。

import {
  FETCH_ALL_CHAPTER,
  POST_CHAPTER,
  PUT_CHAPTER,
  DELETE_CHAPTER
} from "../actions/ChapterActions";
const INITIAL_STATE = {
  chapter_list: []
};
export default function chapterReducer(state = INITIAL_STATE, action) {
  switch (action.type) {
    case FETCH_ALL_CHAPTER:
      return { ...state, chapter_list: [...action.payload] };
    case DELETE_CHAPTER:
      let chaptersCopy0 = state.chapter_list.filter(
        s => s.uuid !== action.payload
      );
      return {
        ...state,
        chapter_list: [...chaptersCopy0]
      };
    case POST_CHAPTER:

      return {
        ...state,
        chapter_list: [
         ...action.payload,
          ...state.chapter_list
        ]
      };
    case PUT_CHAPTER:
      let indexToSub = state.chapter_list.findIndex(
        s => s.uuid === action.payload.uuid
      );
      let chaptersCopy1 = [...state.chapter_list];
      chaptersCopy1[indexToSub] = action.payload;
      return {
        ...state,
        chapter_list: [...chaptersCopy1]
      };
    default:
      return state;
  }
}

操作：

export function postChapter(customer_uuid, assessment_uuid, chapter_data) {
  let url = `${ROOT_URL}/x/${customer_uuid}/assessmentcontainers/${assessment_uuid}/chapters/`;
  return dispatch => {
    return axios
      .post(url, chapter_data)
      .then(res => {
        dispatch({
          type: POST_CHAPTER,
          payload: res.data
        });
        dispatch(
          notifSend({
            message: "Created",
            kind: "success",
            dismissAfter: 2000
          })
        );
        return res;
      })
      .catch(error => {
        console.log(error);
        if (error !== UNAUTHORIZED_ERROR)
          dispatch(
            notifSend({
              message: messageStatus(error),
              kind: "danger",
              dismissAfter: 2000
            })
          );
        return { status: error.status };
      });
  };
}

Answer 1

您要在数组的开头插入新章节，从而更改以下所有元素的索引。

     {
        ...state,
        chapter_list: [
         ...action.payload,
          ...state.chapter_list
        ]
      };