arrays - 更新状态后 Redux match.params 不起作用

Question

我正在 ReactJS 和 Redux 中制作一个简单的 twitter 风格克隆。我目前认为，当您单击主时间线上的帖子时，它会将您带到一个页面，该页面通过将用户带到 /reply/${ling.id} 来呈现其回复。 }> 并使用 [this.props.match.params.id] 来渲染正确的。使用我开始的模拟数据效果很好。
但是，当用户发布新帖子时 - 并且在时间轴上成功呈现 - 出现问题并且参数不匹配，如果您单击应该带您回复/3的帖子，它是而是使用 2 的 id 呈现回复。
我仍然可以访问新帖子，但我必须去回复/0(而不是回复/7，它应该是)，如果我控制台记录事情，我可以看到正确的数据在那里，它只是没有呈现正确。
在我更新状态之前，控制台显示了这一点:

http://localhost:3000/reply/2 
LingReply.js:95 Should render ling # 2
LingReply.js:96 {id: 2 …}

但是如果我在发布新页面后导航到同一页面，它会这样做:

LingReply.js:94 http://localhost:3000/reply/2
LingReply.js:95 Should render ling # 2
LingReply.js:96 {id: 1 …}

这是无效页面的相关代码 - 我是否遗漏了一些明显的内容？

import React, { Component } from "react";
import { Card, CardHeader, CardBody, CardFooter, Button } from "reactstrap";
import { Link } from "react-router-dom";
import { connect } from "react-redux";

class LingReply extends Component {
  render() {
    const ling = this.props.lings.lings[this.props.match.params.id];
    console.log(window.location.href)
    console.log("Should render ling #", this.props.match.params.id)
    console.log(ling)

    return (
      <div key={ling.id}>
        <Card className="ling mb-3">
          <CardHeader>
            <span className="ling-date">{ling.lingLang}</span>
            <h3>
              {ling.userIcon} - {ling.userName}
            </h3>
          </CardHeader>
          <CardBody>{ling.lingBody}</CardBody>
        </Card>
      </div>
    );
  }
}

function mapStateToProps(state) {
  return {
    lings: state.lings,
  };
}

export default connect(mapStateToProps)(LingReply);

这是在我的 GitHub 上: https://github.com/gordonmaloney/Lingr

Answer 1

听起来您的消息有点与数组索引相关联或相关，但是我的另一个想法是您可能正在添加新消息，而不是附加它们。这将它们置于 lings 的开头数组而不是在后面。

function LingsReducer(
  state = {
    lings,
  },
  action
) {
  console.log(action)

  switch (action.type) {
    case ActionTypes.POST_LING:
      return {
        ...state,
        lings: [{...action.payload}, ...state.lings], // <-- always added to front
      };
    default:
      console.log(state)
      return state
  }
}

你应该颠倒顺序。

function LingsReducer(
  state = {
    lings,
  },
  action
) {
  console.log(action)

  switch (action.type) {
    case ActionTypes.POST_LING:
      return {
        ...state,
        lings: [...state.lings, { ...action.payload }],
      };
    default:
      console.log(state)
      return state
  }
}

更新
我发现您基本上使用数组“索引”作为 id 值。如果您查看 NewLingComponent:L32-39您正在使用数组长度来计算下一个新 id .

handleSubmit(values) {
  this.props.handleAddLing(
    values.newLingBody,
    values.newLingLang,
    values.newLingCorPref,
    this.props.lings.lings.length + 1 // <-- this
  );
}

当数组为空，长度为0时，生成id 1

当数组长度为 1 时，生成 id 2

... 等等

您可能需要重新考虑这一点，并实际使用一个真正的 GUID，它坚持 ling 消息数据并且与数组索引无关，因为现在您看到这会在您改变数组时导致问题(即重新排序，在中间添加或删除，等等...)。
如果您改用 GUID，则需要在 LingReply 中搜索匹配项.

class LingReply extends Component {
  render() {
    const { lings, match } = this.props;

    // I think I got the accesses correct here, but double check
    const ling = lings.lings.find(ling => ling.id === match.params.id);

    return (
      <div key={ling.id}>
        <Card className="ling mb-3">
          <CardHeader>
            <span className="ling-date">{ling.lingLang}</span>
            <h3>
              {ling.userIcon} - {ling.userName}
            </h3>
          </CardHeader>
          <CardBody>{ling.lingBody}</CardBody>
          <CardFooter>
            <ReplyCorrect content={ling.lingBody} />
            <Link to="/">
              <Button color="primary" outline>
                Post
              </Button>
            </Link>
          </CardFooter>
        </Card>

        <Replies ling={ling} />
      </div>
    );
  }
}