Reactjs 在ComponentDidMount上进行异步API调用

我有一个ReactJS，它需要一个艺术家对象列表。我阅读了ReactJS文档，发现：

所以我想，好吧，我将从

componentDidMoun（）

方法中启动

fetchArtists（）

操作（我正在使用Redux）

我正在这样做，但由于某种原因它不起作用。我要返回的艺术家列表是未定义的，即使在日志中，我也可以看到艺术家被返回了

代码

下面是应用程序容器组件

class App extends Component {
  componentDidMount() {
    this.props.dispatch(ArtistsListActions.fetchArtists());
  }

  render() {
    return (
      <div className="App">
        <Header />
        <Route exact path="/" render={routeProps => <ArtistList {...routeProps} artists={this.props.artists} />} />
        <Route exact path="/artist/:artistUrlName" component={Artist} />
      </div>
    );
  }
}

ArtistList.propTypes = {
  artists: PropTypes.array.isRequired
};

const mapStateToProps = function(state) {
  console.log('The state is:');
  console.log(state);
}

export default connect(mapStateToProps)(App);

类应用程序扩展组件{
componentDidMount（）{
this.props.dispatch（artistslistations.fetchArtists（））；
}
render（）{
返回(

更新

我按照大家的建议在我的
mapstateTrops（）
方法中返回一个选项，但仍然不起作用。我已经捕获了中发生的情况。
在调用axios之前抛出错误。初始状态与api的响应形状不匹配

您可以尝试通过ActionCreator将其正常化，或者更新初始状态以匹配API：

const initialState = {
  isFetching: false,
  fetchComplete: false,
  artists: {artists: {verified:[]}},
  error: null
};

为完整起见，这是更改初始状态时所需的MapStateTrops：

const mapStateToProps = function(state) {
    console.log(state);
  return {
        artists: state.artists.artists.verified
    }
}

所以，你可能忘了发送道具

class App extends Component {
  componentDidMount() {
    this.props.fetch(); //Call just your mapped dispatch
  }

  render() {
    return (
      <div className="App">
        <Header />
        <Route exact path="/" render={routeProps => <ArtistList {...routeProps}     artists={this.props.artists} />} />
        <Route exact path="/artist/:artistUrlName" component={Artist} />
      </div>
    );
  }
}

ArtistList.propTypes = {
  artists: PropTypes.array.isRequired
};

const mapStateToProps = function(state) {
  console.log('The state is:');
  console.log(state);
}

const mapDispatchToProps = (dispatch) => {
    return {
        fetch: () => dispatch(ArtistsListActions.fetchArtists())
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(App); //Pass new method here

类应用程序扩展组件{
componentDidMount（）{
this.props.fetch（）；//只调用映射的分派
}
render（）{
返回(
} />
);
}
}
ArtistList.propTypes={
艺术家：PropTypes.array.isRequired
};
const mapStateToProps=函数（状态）{
log（'状态为：'）；
console.log（状态）；
}
const mapDispatchToProps=（调度）=>{
返回{
fetch:（）=>dispatch（artistslistations.fetchArtists（））
}
}
导出默认连接（mapStateToProps，mapDispatchToProps）（应用）；//在此处传递新方法
由于Redux无法从mapStateToProps方法中获得预期结果，此操作失败，mapStateToProps方法应返回要合并到组件道具的对象。它被视为开发人员的失败，因此Redux中断循环，不再处理事件，迫使开发人员修复它

还有
this.props.dispatch（artistslistations.fetchArtists（））
的快捷方式，如果将函数作为第二个参数传递给connect，它将自动在dispatch中包装它，并使包装的函数在props下可用：

class App extends Component {
  componentDidMount() {
    this.props.fetchArtists();
  }

  render() {
    return (
      <div className="App">
        <Header />
        <Route exact path="/" render={routeProps => <ArtistList {...routeProps} artists={this.props.artists} />} />
        <Route exact path="/artist/:artistUrlName" component={Artist} />
      </div>
    );
  }
}

ArtistList.propTypes = {
  artists: PropTypes.array.isRequired
};

const mapStateToProps = function(state) {
  console.log('The state is:');
  console.log(state);
  const artists = state.artists.artists && state.artists.artists.verified;
  return {artists: artists || []};
}

const mapDispatchToProps = {
  fetchArtists: ArtistsListActions.fetchArtists;
}

export default connect(mapStateToProps, mapDispatchToProps)(App);

类应用程序扩展组件{
componentDidMount（）{
this.props.fetchArtists（）；
}
render（）{
返回(
} />
);
}
}
ArtistList.propTypes={
艺术家：PropTypes.array.isRequired
};
const mapStateToProps=函数（状态）{
log（'状态为：'）；
console.log（状态）；
const-artists=state.artists.artists&&state.artists.artists.verified；
返回{艺术家：艺术家| |[]}；
}
const mapDispatchToProps={
fetchArtists:ArtistsListations.fetchArtists；
}
导出默认连接（mapStateToProps、mapDispatchToProps）（应用程序）；
您的mapStateToProps函数需要返回一个对象，其中包含React组件的props作为属性。您没有返回任何内容，因此会出现“undefined”错误消息。@PatrickHund，但当I
console.log（state）时
，我至少应该在那里看到艺术家吗？不，不是第一次呈现组件。如果使用componentDidMount来调度操作，这意味着（1）呈现组件并将其附加到DOM（2）调度redux操作（3）获取数据（4）使用获取的数据更新状态（5）组件再次渲染，使用来自状态的数据我想您忘记了dispatchToProps方法…检查我的
状态
对象的简单方法是什么？可能艺术家数组位于
状态下。艺术家。艺术家。已验证
，但我还不确定，如何检查？在执行您建议的操作后，我很抱歉。我们可以看到您的操作吗ArtistsListations的创建者-而且您似乎没有将dispatch映射到Propsure。mapDispatchToProps（）不是吗

Max提到的只是一个简短的例子？这是艺术家列表。从您链接的所有内容来看，我认为您的数组位于state.artists.artists.verified中是正确的。这是因为您在您的状态中创建了一个具有关键艺术家的属性，然后为其分配了一个具有关键“艺术家”的对象，因此是双艺术家。chan在我上面的答案中输入代码返回{artists:state.artists.artists.verified应该对其进行排序。随时查看您的状态的最简单方法就是控制台。在reducer和ActionCreator中的返回语句之前记录它谢谢@MaxVorobjev，请参阅更新的问题以了解发生了什么这是因为渲染方法希望艺术家是数组，而state.artists.artists、 验证有时未定义。这可以按照上面的说明进行修复，请参见回答中的“修改的

mapStateToProps

”。您能告诉我这里发生了什么吗？

state.artists.artists&&state.artists.artists.verified；

state.artists上的artists属性合并为空。如果存在，则得到的是验证数组，其他wise返回false，因为state.artists.artists为null。然后返回行返回已验证的数组或和空数组，这两个数组中的任何一个都将允许代码运行。