javascript - 行动后 react 不重新渲染

Question

我有一个应用程序，它有一个带有汤列表的仪表板。每种汤都有能力成为日常汤。因此，每个汤都有一个按钮，如果单击该按钮，就会触发一个操作来更新我的 MongoDB，使汤成为每日汤。当汤是日常汤时，它会有 3 个按钮:Remove、Low、Out。如果单击这些按钮中的任何一个，它们会触发一个操作来更新我的 MongoDB 以更新该特定汤。我遇到的问题是，当单击这些按钮中的任何一个时，它会执行操作但不会在屏幕上重新呈现。我必须手动刷新页面才能看到它确实有效。

注意:我正在使用 reduxThunk 来立即分派(dispatch)操作(请参阅下面的代码)

我试过用

Object.assign({}, state, action.payload)

在我的 reducer 中要确保避免直接改变状态。

我还尝试重写我的 reducer :

case "UPDATE_SOUP":
      return {
        ...state,
        isDaily: action.payload.isDaily,
        isLow: action.payload.isLow,
        isOut: action.payload.isOut
      };

React 汤组件:

class Soup extends Component {
  render() {
    const { soup } = this.props;
    return (
      <div>
        <div key={soup.name} className="card">
          <div
            className={`card-header ${
              soup.isDaily ? "alert alert-primary" : null
            }`}
          >
            {soup.isDaily ? (
              <span className="badge badge-primary badge-pill">Daily Soup</span>
            ) : (
              "Soup"
            )}
          </div>
          <div className="card-body">
            <h5 className="card-title">{soup.name}</h5>
            <p className="card-text">
              {soup.isLow ? (
                <span className="badge badge-warning badge-pill">
                  This soup is marked as LOW.
                </span>
              ) : null}
              {soup.isOut ? (
                <span className="badge badge-dark badge-pill">
                  This soup is marked as OUT.
                </span>
              ) : null}
            </p>

            {soup.isDaily ? (
              <div>
                <button
                  onClick={() =>
                    this.props.updateSoup(soup._id, {
                      isDaily: false,
                      isLow: false,
                      isOut: false
                    })
                  }
                  className="btn btn-danger "
                >
                  Remove
                </button>
                <button
                  onClick={() =>
                    this.props.updateSoup(soup._id, {
                      isLow: true
                    })
                  }
                  className="btn btn-warning"
                >
                  Getting Low
                </button>
                <button
                  onClick={() =>
                    this.props.updateSoup(soup._id, {
                      isOut: true
                    })
                  }
                  className="btn btn-dark"
                >
                  Ran Out
                </button>
              </div>
            ) : (
              <button
                onClick={event =>
                  this.props.updateSoup(soup._id, {
                    isDaily: true
                  })
                }
                className="btn btn-primary"
              >
                Make Daily
              </button>
            )}
          </div>
        </div>
      </div>
    );
  }
}

function mapStateToProps({ soupsReducer }) {
  return { soupsReducer };
}

export default connect(
  mapStateToProps,
  actions
)(Soup);

React SoupList 组件(显示所有汤):

class SoupList extends Component {
  componentDidMount() {
    this.props.allSoups();
  }

  renderSoup() {
    const { soupsReducer } = this.props;
    if (soupsReducer.length > 0) {
      return soupsReducer.map(soup => {
        if (soup.name !== "date") {
          return <Soup key={soup._id} soup={soup} />;
        } else {
          return null;
        }
      });
    }
  }

  render() {
    console.log("SoupListProps=", this.props);
    return <div>{this.renderSoup()}</div>;
  }
}

function mapStateToProps({ soupsReducer, dateReducer }) {
  return { soupsReducer, dateReducer };
}

export default connect(
  mapStateToProps,
  actions
)(SoupList);

行动:

export const updateSoup = (id, update) => async dispatch => {
  const res = await axios.put(`/api/allsoups/${id}`, update);
  dispatch({ type: "UPDATE_SOUP", payload: res.data });
};

reducer :

export default function(state = [], action) {
  switch (action.type) {
    case "FETCH_SOUPS":
      return action.payload;
    case "ALL_SOUPS":
      return action.payload;
    case "UPDATE_SOUP":
      return action.payload;
    default:
      return state;
  }
}

Answer 1

问题是你在做每一个 Action 时都在重写你的整个状态

return action.payload; 

你需要做类似的事情

return { ...state, someStateKey: action.payload.data.someKey }

根据操作类型，您可以从响应中提取所需数据并将其设置在您的状态中。

如果您可以提供有关回复的更多信息，我可以用更具体的细节更新答案