Question

我有一个使用redux connect的组件。在这个组件中，我有 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的情况下做到这一点吗？或者如何以适当的方式做到这一点？

Answer 1

问题在于阅读数据不是来自州，而是道具。

            *, *:before, *:after {
              -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
            }

            body { margin: 0; }

            .columnsContainer, footer, header { position: relative; margin: .5em; }

            .leftColumn, .rightColumn, footer, header {  border: 1px solid  #ccc; padding: 1.25em; }

            .leftColumn { margin-bottom: .5em; }

            .nav {
              list-style: none;
              margin-left: 0;
              margin-bottom: 0;
              padding-left: 0;
            }

            .nav > li,
            .nav > li > a {
              display: inline-block;
              *display: inline;
              zoom: 1;
            }

            .inline-items {
              margin-top: 0;
            }

            .inline-items li {
              margin-left: 0;
              border-left: 1px solid black;
              padding-left: 10px;
              padding-right: 10px;
            }

            .inline-items li:first-child {
              margin-left: 0;
              border: none;
              padding-left: 0;
              padding-right: 10px;
            }

            .inline-items li:last-child {
              padding-right: 0;
            }

            /* MEDIA QUERIES */
            @media screen and (min-width: 47.5em ) {
              .leftColumn { margin-right: 19.5em; }

                .rightColumn { position: absolute; top: 0; right: 0; width: 18.75em; }   
            }

Redux更新组件中的其他道具

1 个答案: