Redux 更新组件中的附加道具答案

【问题标题】：Redux update additional props in componentRedux 更新组件中的附加道具
【发布时间】：2018-04-05 03:20:41
【问题描述】：

我有一个使用 redux 连接的组件。在这个组件中，我有 mapStateToProps，它从 redux 状态获取项目，projectTransform 是一个具有来自项目 redux 状态的过滤器值的值：

import React, { Component } from 'react';
import PropTypes from "prop-types";
import { connect } from 'react-redux';

class ProjectForm extends Component {
  constructor(props){
    super(props);
  }
  componentDidMount() {
    const { 
      fetchProject, 
    } = this.props;

    fetchProject();

  }
  onClick() {
    this.setState({
      project1: {
        "a": 1,
        "b": 2
      }
    })
  }


  render() {
    const { project1 } = this.props;
    return (
      <div>
        <button onClick={onClick()} />
      </div>
    )
  }
}

ProjectForm.propTypes = {
  fetchProject: PropTypes.func.isRequired
};

function mapDispatchToProps (dispatch) {
  return 
    fetchProject: () => dispatch(projectActions.getProjectRequest()),
  }
}

function mapStateToProps ( state ) {
  const { project} = state
  return {
    project: project,
    project1: ((project) => {
      return project[0]
    })(project)
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(ProjectForm)

我现在尝试在按钮上触发重新渲染，但我不知道如何去做。

this.setState((previousState) => {
 project1: [JSON value from Form]
});

还有为什么 previousState 是 null 我会假设它会有 mapStateToProps 数据。知道如何在不调度整个 redux 的情况下做到这一点吗？或者如何以适当的方式做到这一点？

【问题讨论】：

您需要提供更多信息。你指的是什么按钮？我没有看到它的任何代码，也没有看到它调用 onClick 的函数。您要在哪个组件中设置状态？它是否有 project1 状态和道具？ mapStateToProps 中的 project1 方法的目的是什么？ project1 方法似乎没有必要。您的 setState 更新程序方法没有返回任何内容，您似乎也没有在任何地方使用 prevState。
嗨，我在渲染方法中有一个按钮，点击它执行 setState。我不想强制更新
您从未设置初始状态，因此第一次更新的 prevState 为 null。您还需要将<button onClick={onClick()} /> 更改为<button onClick={this.onClick.bind(this)} />。您正在尝试在分配中调用 onClick 方法。您也错误地引用了它。您还需要绑定 onClick 回调方法的 this 上下文。我建议在您的类的构造函数中执行此操作，而不是为简洁起见如上所示的内联。组件的渲染方法中的内联函数绑定会破坏 PureComponents 并强制进行不必要的重新渲染。
如果你提到的这个修复将修复设置状态不触发渲染的问题。我不这么认为。代码有点笨拙，以显示我想要做什么的概念
100%，<button onClick={onClick()} />，不是您引用反应 onClick 道具的回调方法的方式。

标签： reactjs redux react-redux

【解决方案1】：

问题在于不是从 state 而是从 props 读取数据。

render() {
    const { project1 } = this.state;
    return (
      <div>
        <button onClick={onClick()} />
      </div>
    )
  }

【讨论】：