Question

我目前正在学习使用React（尚未使用Redux）构建应用程序。到目前为止，除了加载数据（通过ajax）外，其他所有操作都按预期进行。让我完善我的意思。

我正在通过库“ spotify-web-api-js”使用spotify API。

到目前为止，我有2个组成部分：

搜索字段
显示艺术家列表

当然，所有内容都在应用程序级别连接。

应用程序级别

class App extends Component {
  constructor(props) {
    super(props);

    this.state = {
      artists: []
    }

    this.searchArtists('Chris');
  }

  searchArtists(artist) {
    api.searchArtists(artist, (err, data) => {
      if (err) { console.log(err); };
      this.setState({ artists: data }, () => {
        console.log(this.state.artists);
      });
    });
  }

  render() {
    const artistSearch = (artist) => { this.searchArtists(artist); };

    return (
      <div>
        <Search onSearchTermChange={ artistSearch } />
        <SearchResult artists={ this.state.artists.artists } />
      </div>
    );
  }
};

搜索

class Search extends Component {
  constructor(props) {
    super(props);

    this.state = { artist: '' };
  }

  render() {
    return (
      <div className="search-bar">
        <input
          value={ this.state.artist }
          onChange={ event => this.onInputChange(event.target.value) }
          placeholder="Search by Artist" />
      </div>
    );
  }

  onInputChange(artist) {
    this.setState({ artist });
    this.props.onSearchTermChange(artist);
  }
}

export default Search;

搜索结果

const SearchResult = props => {
  if (!props) {
    console.log('loading');
  }

  return <li></li>;
}

问题

我正在尝试在SearchResult中显示结果，但始终返回未定义。我尝试了settimeout，但是我知道这不是解决我问题的方法。

为什么props返回未定义？即使数据似乎返回正常。

我将继续寻找简单的答案，如果发现问题，将编辑问题。

谢谢！

编辑：

这是我在控制台中得到的响应：

{
  artists: {
    artists: {
      href: 'sikshdksad',
      items: [array],
      limit: 20,
      ....
    }
  }
}

有2位艺术家，因为this.state = { artists: [] }如果我没看错的话。

Answer 1

看起来您最初是在将艺术家状态定义为数组：

constructor(props) {
  super(props);

  this.state = {
    artists: []
  }

  this.searchArtists('Chris');
}

您最终将其设置为返回函数中返回的data。但是，当您引用艺术家数据作为道具传递时，您似乎正在尝试访问artists对象上的artists值：

<SearchResult artists={ this.state.artists.artists } />

也许只是摆脱掉最后的.artists？

反应-道具未定义

1 个答案: