时间戳

首页 > 解决方案 > 调度和设置状态后是否调用或更新渲染

reactjs - 调度和设置状态后是否调用或更新渲染

问题描述

我制作会员组件。通话componentDidMount()功能getMemberList()

class Members extends Component{
    constructor(props) {
        super(props);
        this.state = {
            members: []
        }
    }

    componentDidMount() {
        getMemberList(this.props);
    }

    render() {
        return (
            <div>
                <div>Members</div>
                {this.state.members.map((member) => (
                    <li key={member.id}>
                        {member.name}
                    </li>
                ))}
            </div>
        );
    }
}

export default connect((state) => state)(Members);

当函数getMemberList()被调用时，它连接服务器并放置成员数据并进行操作和调度。

export function getMemberList(props){
    axios.get('/api/members')
        .then(function (response) {
            // handle success
            let data = response.data;
            let members = data.data;
            let action = {
                type: 'GET_MEMBERS',
                members: members,
            };
            props.dispatch(action);
        })
        .catch(function (error) {
            // handle error
            console.log(error);
            return {
                type: 'GET_MEMBERS_ERROR',
                authenticated: false
            };
        })
        .finally(function () {
            // always executed
        });
}

然后调用 reducer 并将成员设置为状态。它似乎运作良好。

const initData = {
    members: []
}
export function memberReducer(state = initData, action){
    switch (action.type) {
        case 'GET_MEMBERS':
            return {
                members: action.members
            };
        case 'GET_MEMBERS_ERROR':
            return state;
        default:
            return state;
    }
}

但是我的理解是 render 应该在调度后调用。JSX 中的成员列表未更新。

是不是对我有误解？

请帮助并给我一个建议。

标签： reactjsredux

解决方案

您的组件应如下所示：

class Members extends Component {

  componentDidMount() {
    getMemberList(this.props);
  }

  render() {
    return (
      <div>
        <div>Members</div>
        {this.props.members.map(member => (
          <li key={member.id}>{member.name}</li>
        ))}
      </div>
    );
  }
}
// this function takes your redux state and returns an object with a key of members to your component.  You will be able to access the members value in your component by this.props.members - again, it's mapped your redux STATE to your react PROPS
const mapStateToProps = state => {
  return {
    members: state.members
  };
};

export default connect(mapStateToProps)(Members);

该members数组应该来自您的 redux 存储。在您的组件中，您正在查看处于members反应状态的数组。那里什么都没有，也没有更新。

您需要将您的 redux 状态映射到您的组件。在上面的代码片段中，这就是mapStateToProps/connect正在做的事情。您正在获取 redux 状态并通过connect组件将值传递给您的反应道具。

我不确定你的传球是getMemberList什么this.props。

推荐阅读