Question

`

＆＃13;

import React, {Component} from 'react';
import {connect} from 'react-redux';
import Chart from '../components/chart.js';
import GoogleMap from '../containers/googlemap';
import {removeCityMap} from '../actions/index';
import { bindActionCreators } from "redux";
import AttributeSelector from './attributeselector'

class WeatherBoard extends Component{
    constructor(props){
        super(props);
        this.state = {
            chartData1: []
        }
    }
    weatherAttrMapper(attrName){
        //Setting the state which is based on the data received from action dispatched.
        this.setState({
            chartData1:this.props.weather[0].list.map(weather => weather.main[attrName])
        })
    }
    renderMapList(cityData){
        //Based on the weather prop received when action is dispached I want to set the state before rendering my <chart> element.
        this.weatherAttrMapper('temp');
        return(
            <tr key = {cityName}>
                <td><Chart data = {this.state.chartData1} color = "red" units="K"/></td>
            </tr>
        )
    }
    render(){
        return(
            <table className="table table-hover">
                <tbody>
                    {this.props.weather.map(this.renderMapList.bind(this))} 
                </tbody>
            </table>
        )
    }
}
//This is the weather state coming from my reducer which is being used here.
function mapStateToProps({ weather }) {
    return { weather };
}
function mapDispatchToProps(dispatch) {
    return bindActionCreators({ removeCityMap }, dispatch);
}
  
export default connect(mapStateToProps,mapDispatchToProps)(WeatherBoard);

＆＃13;

`我对州管理有疑问。

问题陈述：我有一个容器abc.JS文件，它由mapStateToProps映射到redux状态。按钮单击时有一个动作处理程序，它从API获取数据。调度我的actionhandler后，它会在abc.js中点击我的render方法。现在我的问题是我在abc.js中维护状态，这也在render方法中使用，这需要在调度action时进行修改。那么我怎样才能设置我的abc.js状态，这也可以被渲染。

我还添加了我的abc.js的确切代码片段。所以基本上我在调度动作时输入我的渲染方法，我在这里需要设置状态。

感谢。

Answer 1

理想情况下，如果您依赖于使用道具设置的状态值。使用componentWillReceiveProps生命周期钩子来设置setState。它会完成这项工作。只要在更新阶段中有道具更改

，它就会被触发

Answer 2

这取决于你需要做什么，如果你只是需要发出一个动作并同时设置状态＆＃34;＆＃34;然后这样的事情会起作用：

...
  handleOnClick = () => {
    this.props.actions.myAction();
    this.setState({ myStateField: "myNewValue" });
  }

  render() {
    return (
      <div>
        <h1>MyContainer</h1>
        <button onClick={this.handleOnClick}>Click me</button>
      </div>
    );
  }

如果您需要根据管理器中状态的更新方式调度操作，您还需要更新状态，那么您可以使用像componentWillReceiveProps这样的简单生命周期方法来阅读新的道具，甚至比较旧的道具并采取行动，这意味着，基于此，你可以更新你的状态。让我知道，如果这有帮助，否则我可以更新我的答案;）

编辑：

阅读完评论后，您就可以这样做了：

...
componentWillReceiveProps(nextProps) {
  // In here you can also use this.props to compare the current props
  // to the new ones and do something about it
  this.setState({ myStateField: nextProps.propFromRedux });
}
...

Answer 3

在发送您的操作之前，您可以说this.setState {}并且它将修改您的组件状态，一旦操作再次调度它会导致重新呈现，因为此操作可能会更改某些商店的状态。

在调度操作时，我们如何修改组件状态？

3 个答案: