Как мы можем также изменить состояние компонента при отправке действия?

`

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);

"У меня есть сомнения относительно государственного управления.

Постановка проблемы: у меня есть файл abc.JS контейнера, который сопоставлен с избыточным состоянием mapStateToProps. У меня есть обработчик действия при нажатии кнопки, который выбирает данные из API. Когда мой actionhandler отправляется, он попадает в мой метод рендеринга в abc.js. Теперь я спрашиваю, что я поддерживаю состояние и в abc.js, который также используется в методе рендеринга, и это необходимо изменить при отправке действия. Итак, как я могу установить мое состояние abc.js, которое также может быть отображено.

Я также добавил точный фрагмент кода моего abc.js. Так что, в основном, я ввожу свой метод рендеринга, когда отправляется действие, и мне нужно как-то установить.

Благодарю.

Источник

3 ответа

Решение

Это зависит от того, что вам нужно сделать, если вам просто нужно отправить действие и установить состояние "одновременно", тогда будет работать что-то вроде этого:

...
  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 });
}
...
Источник

В идеале, если вы зависите от значения состояния, которое устанавливается с помощью реквизита. Используйте хук жизненного цикла componentWillReceiveProps для setState . это сделает работу. Он срабатывает при каждом изменении реквизита на этапе обновления

Источник

Перед отправкой вашего действия вы можете просто сказать this.setState{}, и это изменит состояние вашего компонента, и как только действие отправит его снова, вызовет повторную визуализацию, потому что это действие может изменить часть состояния магазина.

Источник
Другие вопросы по тегам