Reactjs 在本地状态中使用redux状态

我试图弄明白为什么我不能将我的redux状态定义为我的本地状态。基本上，我试图给出this.props.tournames的值，这样我就可以操纵状态。但是每次我定义它并在renderList函数中显示console.logthis.state.display时，它都会吐出一个空数组。但是如果我从我的api中获取所需的数据，你有什么想法吗

以下是我的工作内容：

主要成分

我的重复动作

import {
  FETCH_TOURNAMENTS,

} from './types';

import { API_TOURNAMENTS_URL } from '../constants/api';
import axios from 'axios';

export const fetchTournaments = () => async dispatch => {
  const response = await axios.get(API_TOURNAMENTS_URL);

  dispatch({ type: FETCH_TOURNAMENTS, payload: response.data });
};

我的减速机

首先，当调用构造函数时，数据将不可用

并且您正在初始化状态内部的状态，因此，如果您希望在道具发生更改时也更新状态，您可以使用：

componentDidUpdate(nextProps) {
  // set your state here
}

但是，我不建议这样做

由于您已经在映射stateToProps，这将导致重新渲染，因为您的锦标赛中有任何更改，因此您只能将该道具用于显示目的，如果您想进行任何更改，则应调度事件，这是您在react-redux体系结构中应该做的

您的console.log显示正确的结果，这就是它的工作原理

我不会这样做：

this.state = {
  searchTerm: '',
  displayed: this.props.tournaments
};

而是在componentDidMount中使用getDerivedStateFromProps函数或setState

它不显示的原因是因为setState是异步的

setState接受回调的第二个参数，您可以使用该参数来确保已设置状态，然后调用回调中的函数，该函数与React组件有关。您的构造函数方法在创建组件时只调用了一次，并且在更新道具后不会更新

---

componenedDidMount方法更新您的redux存储，但不影响您的本地状态。您可以在组件的componentDidUpdate方法中同步redux状态和本地状态。不要使用componentWillReceiveProps它不推荐使用这是因为两个原因：

由于tournaments的值在调用函数fetchTournaments时在redux中异步设置，因此在本地状态下显示的初始值将是redux中tournaments的初始值，即空数组。 构造函数只运行一次，所以即使在获取数据之后，并且在redux中，您也可以获得锦标赛的新值。您的状态值不受影响。因此，console.log中未定义 为了弥补这一点,

仅当tournaments prop的值发生更改时，才应设置显示的状态。像这样- 此外，作为一般实践，我建议不要在构造函数中将state的值设置为prop，而是使用initialstate。 i、 e

---

为什么要将已通过redux state可用的状态数据复制到本地状态？

import {
  FETCH_TOURNAMENTS,
} from '../actions/types';

export default (state = {}, action, value: '') => {
  switch (action.type) {
 
    case FETCH_TOURNAMENTS:
      return { ...state, [action.payload.id]: action.payload };
 
    default:
      return state;
  }
};

componentDidUpdate(nextProps) {
  // set your state here
}

this.state = {
  searchTerm: '',
  displayed: this.props.tournaments
};

componentWillReceiveProps(nextProps) {
 // compare this.props and nextProps and set state here
}

this.state = {
  searchTerm: '',
  displayed: []
}