Reactjs 如何使用redux和redux thunk将从服务器获取的数据保存到组件状态？

在我的react应用程序中，我有一个名为profile的组件，我正在从服务器获取数据，并将其显示在该组件中。我正在使用redux和redux thunk以及axios。在mapDispatchToProps函数的帮助下，我正在调用redux操作，以便在安装组件时获取该数据并将其保存到redux状态。之后，使用MapStateTops函数，我通过道具在屏幕上显示数据。那很好。现在我想有可能编辑，例如，那个用户的名字。为了实现这一点，我需要在从服务器获取数据时将数据保存到组件状态，然后在更改文本字段时，组件状态也需要更改。不知道如何在获取数据后立即将数据保存到组件状态

简化代码：

const mapStateToProps = (state) => {
    return {
        user: state.user
    }
}

const mapDispatchToProps = (dispatch) => {
    return {
        getUserData: () => dispatch(userActions.getUserData())
    }
}    

class Profile extends Component {
    state:{
         user: {}
    }

    componentDidMount (){
        this.props.getUserData()
        // when data is saved to redux state i need to save it to component state
    }

    editTextField = () => {
      this.setState({
        [e.target.id]: e.target.value
       })
    };

    render(){

        const { user } = this.props;

        return(
            <TextField id="firstName"
                   value={user.firstName}
                   onChange={this.editTextField}
            />
        )

    }
}

const-mapStateToProps=（state）=>{
返回{
用户：state.user
}
}
const mapDispatchToProps=（调度）=>{
返回{
getUserData:（）=>dispatch（userActions.getUserData（））
}
}    
类概要文件扩展了组件{
声明：{
用户：{}
}
组件安装（）{
this.props.getUserData（）
//当数据保存到redux状态时，我需要将其保存到组件状态
}
editTextField=（）=>{
这是我的国家({
[e.target.id]：e.target.value
})
};
render（）{
const{user}=this.props；
返回(
)
}
}

您可以使用

componentdiddupdate

进行此操作，或者为您的操作提供回调函数。 我将两者都展示

首先让我们看一下

componentdiddupdate

在这里，您可以比较以前的数据和当前的数据，如果有一些更改，您可以设置您的状态，例如，如果您的数据是数组

状态={
数据：[]
}

然后在

组件中更新

componentDidUpdate(prevProps, prevState) {
   if(prevProps.data.length !== this.props.data.length) {
    // update your state, in your case you just need userData, so you 
    // can compare something like name or something else, but still 
    // for better equality check, you can use lodash, it will also check for objects, 
    this.setState({ data: this.props.data});
  }
}

_.isEqual(a, b); // returns false if different

这是一个解决方案，另一个解决方案是将回调函数传递给您的操作

假设您调用
this.props.getData（）

你可以这样做

this.props.getData((data) => {
 this.setState({ data });
})

在这里，您可以将数据从redux操作传递到您所在的州

您的redux操作将是这样的

export const getData = (done) => async dispatch => {
  const data = await getSomeData(); // or api call

  // when you dispatch your action, also call your done 
  done(data);
}

您可以为此使用
componentdiddupdate
，或者为您的操作提供回调函数。
我将两者都展示

首先让我们看一下
componentdiddupdate

在这里，您可以比较以前的数据和当前的数据，如果有一些更改，您可以设置您的状态，例如，如果您的数据是数组

状态={
数据：[]
}

然后在
组件中更新

componentDidUpdate(prevProps, prevState) {
   if(prevProps.data.length !== this.props.data.length) {
    // update your state, in your case you just need userData, so you 
    // can compare something like name or something else, but still 
    // for better equality check, you can use lodash, it will also check for objects, 
    this.setState({ data: this.props.data});
  }
}

_.isEqual(a, b); // returns false if different

这是一个解决方案，另一个解决方案是将回调函数传递给您的操作

假设您调用
this.props.getData（）

你可以这样做

this.props.getData((data) => {
 this.setState({ data });
})

在这里，您可以将数据从redux操作传递到您所在的州

您的redux操作将是这样的

export const getData = (done) => async dispatch => {
  const data = await getSomeData(); // or api call

  // when you dispatch your action, also call your done 
  done(data);
}

如果您使用的是React 16.0+，则可以使用静态方法
getDerivedStateFromProps
。你可以读到它

以您的例子：

class Profile extends Component {
  // other methods here ...

  static getDerivedStateFromProps(props) {
    return {
      user: props.user
    }
  }

  // other methods here...
}

如果您使用的是React 16.0+，则可以使用静态方法
getDerivedStateFromProps
。你可以读到它

以您的例子：

class Profile extends Component {
  // other methods here ...

  static getDerivedStateFromProps(props) {
    return {
      user: props.user
    }
  }

  // other methods here...
}

我认为第一个使用componentDidUpdate的解决方案不起作用，因为它只会在统计信息发生变化时触发，我需要在道具发生变化时触发componentDidUpdate也会在道具发生变化时运行：）很乐意帮忙，如果有效，你可以标记我的答案：）我认为第一个使用componentDidUpdate的解决方案不起作用，因为它只会在统计信息更改时触发，我需要在道具更改时触发它componentDidUpdate也会在道具更改时运行：）很乐意帮忙，如果有效，你可以标记我的答案：）这很好。。。但我会改变状态，每次我把一些东西在文本字段中，所以这将触发每次我这样做，这将是很好的，它会触发第一次渲染，这很好。。。但每次我在文本字段中放置一些内容时，我都会更改状态，所以每次我这样做时都会触发，最好在第一次渲染时触发