Javascript 获取数据，然后将其呈现给dom

您好，我正在从api获取数据，我希望获取数据并将其呈现给dom，但我遇到错误“Uncaught TypeError:无法读取Topicselect.render上未定义的属性“map”

下面是我正在做的基本内容，尽管我已经抽象出了与问题不直接相关的任何内容，例如实际的主题名称、导入内容等：

class Topics extends Component{
   constructor(props){
     super(props);
     this.state = {
       topics: []
     }
   }
    componentWillMount(){
        fetch('/api').then((res)=>r.json().then((data)=>{
               // push topics into this.state.topics somehow
        }) 
       console.log(this.state.topics) //returns ['topic1','topic2','topic3'];
    } 
   render(){
     const list = this.state.topics.map((topic)=>{
         return(<li>{topic}</li>);
     })
    return(
      <ul>
        {list}
      </ul>
     )
    }
}

类主题扩展组件{
建造师（道具）{
超级（道具）；
此.state={
主题：[]
}
}
组件willmount（）{
获取（'/api'）。然后（（res）=>r.json（）。然后（（数据）=>{
//以某种方式将主题推送到this.state.topics
}) 
console.log（this.state.topics）//返回['topic1'，'topic2'，'topic3']；
} 
render（）{
const list=this.state.topics.map（（主题）=>{
返回（
{topic}
）；
})
返回(

{list}

)
}
}

---

有人能告诉我如何解决这个问题吗？我在这里看到了一个答案，说使用componentDidMount而不是componentWillMount，但这对我不起作用

你缺少一个结束括号

）

在获取之后，确实建议使用

componentDidMount（）

而不是

componentWillMount（）

用于从API获取数据

也不要忘记使用

this.setState（{topics:data.howeverYourDataIsStructured}）从API接收数据后，确保组件重新加载

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

  componentDidMount() {
    fetch('/api').then((res)=>r.json().then((data)=>{
      this.setState({ topics: data.topics });
    }));
    console.log(this.state.topics) //returns [];
  }

  render() {
    console.log(this.state.topics) //returns [] the first render, returns ['topic1','topic2','topic3'] on the second render;
    return(
      <ul>
        {this.state.topics.map(topic => (
          <li>{topic}</li>
        ))}
      </ul>
    )
  }
}

类主题扩展组件{
建造师（道具）{
超级（道具）；
此.state={
主题：[]
}
}
componentDidMount（）{
获取（'/api'）。然后（（res）=>r.json（）。然后（（数据）=>{
this.setState（{topics:data.topics}）；
}));
console.log（this.state.topics）//返回[]；
}
render（）{
console.log（this.state.topics）//返回[]第一次呈现，在第二次呈现时返回['topic1'、'topic2'、'topic3']；
返回(

{this.state.topics.map（topic=>(
{主题}
))}

)
}
}
确保使用
setState（）
更新状态，否则将不会触发
render（）
来更新dom。还要确保您不仅覆盖当前状态，而且将新主题添加到旧主题中。（与本案无关，但仍需提及）

一种方法是：

componentDidMount() {
    var currentTopics = this.state.topics;
    fetch('/api').then((res) => r.json().then((data) => {
            currentTopics.push(data);
        }));
    this.setState({'topics': currentTopics});
}

但是您也可以在循环内调用
setState（）
。因此，如果要进行其他更改，它将首先等待，然后再实际执行更改，然后触发
render

componentDidMount() {
    fetch('/api').then((res) => r.json().then((data) => {
        this.setState((state) => ({ topics: [...state.topics, data]}));
    }));
}

您发布的错误似乎与您的代码不符。你有“Topicselect”课程吗？可能是