将状态与 componentDidMount 一起使用

Question

我想在componentDidMount之后returns成功获取数据，但是之前出现singer.data未定义的错误：

// imports
export default class LookSinger extends Component {
    state = {
        singer: {}
    }
    componentDidMount () {
        let { singer } = this.props.location.state;
        singer = singer.replace(/ /g,"+");
        const fetchData = async () => {
        try {
            const response = await fetch(
                `http://ws.audioscrobbler.com/2.0/?method=artist.getinfo&artist=${singer}&api_key=a3c9fd095f275f4139c33345e78741ed&format=json`
            );
            const data = await response.json();
            this.setState({
                singer: data
            })
          } catch (error) {
            console.log(error.message);
          }
        }
        fetchData();
    }
      render() {
          let singer = this.state.singer
        return(
            <div>
                {console.log(singer.artist.name)} // gives undefined but after fetching artist.name absolutely exists
            </div>
        )
      }
}

Url 是：http://ws.audioscrobbler.com/2.0/?method=artist.getinfo&artist=Ariana+Grande&api_key=a3c9fd095f275f4139c33345e78741ed&format=json

Answer 1

你做了 let singer = this.state 但你的代码中没有 this.setState({ singer: ... })。尝试 this.setState({ singer: data })

而不是 this.setState({ data })

Answer 2

设置你的状态如下，

        const data = await response.json();
        this.setState({
            singer: data
        })

你可以这样退出，

        console.log(this.state.singer)

Answer 3

问题出在这里：

{console.log(singer.artist.name)}

在初始渲染中，singer.artist 是未定义的，如果您调用 singer.artist.name 它将抛出错误。 name of undefined.....你只需要等待数据获取和更新状态。

这样试试

export default class LookSinger extends Component {
  state = {
    singer: {}
  }
  componentDidMount () {
    let { singer } = this.props.location.state;
    singer = singer.replace(/ /g,"+");
    const fetchData = async () => {
    try {
        const response = await fetch(`http://ws.audioscrobbler.com/2.0/?method=artist.getinfo&artist=${singer}&api_key=a3c9fd095f275f4139c33345e78741ed&format=json`);
        const data = await response.json();
        this.setState({ singer: data })
      } catch (error) {
        console.log(error.message);
      }
    }
    fetchData();
  }
  render() {
    const { singer } = this.state
    if (!singer.artist) { // <-- Check if the data is present or not.
      return <div>Loding singer info...</div>
    }
    return(
      <div>
        <h1>{singer.artist.name}</h1>
      </div>
    )
  }
}

将状态与 componentDidMount 一起使用

Using state with componentDidMount

state

reactjs

react-lifecycle