为什么 React 没有渲染我的 map function？

Question

我有一个 map function 到一个 state 我确定它不是空的，因为它的状态已被记录。

当我加载页面时，它显示 div“加载了”，但仅此而已。 控制台也不会注册他的“运行”日志。

这是针对 CS50W 课程的，所以我使用的是浏览器内的 Babel 转换器。 有人建议我完全改变编译代码的方法，但这意味着学习并进行全新的设置，所以我希望这不是它不起作用的原因。

class Posts extends React.Component{
    
    
    constructor(props){     
        super(props)
        this.state = {
            aposts: [],
            isLoaded: false
        }
    } 

    componentDidMount() {
        console.log('running go fetch');
        let currentList = [];
        fetch('/posts')
        .then(response => response.json())
        .then(posts => {
        
            
            
            for (var i = 0; i < posts.length; i++) {
                
                
                currentList.push(posts[i])
                console.log(currentList[i])
                
                
               
                
            }
            
            
        });
        console.log(currentList)

        this.setState({ aposts: currentList, isLoaded: true }, () => {
        console.log(this.state.aposts, 'aposts');
        }); 
        
    } 
     
    
    render(){
        var isLoaded = this.state.isLoaded
        if (isLoaded = true){
        return (
            <div>
                <div>did load</div>
                {this.state.aposts.map(function(apost) {
                console.log("running")    
                return (<li key = {apost.id}> {apost.id} </li>)
                })}
                
            </div>
            );          
        }
        else{
            <div>No load</div>
        }
    }

Answer 1

 componentDidMount() {
        console.log('running go fetch');
        let currentList = [];
        fetch('/posts')
        .then(response => response.json())
        .then(posts => {
        
            for (var i = 0; i < posts.length; i++) {
                currentList.push(posts[i])
                console.log(currentList[i])
            }
            
            console.log(currentList)

            this.setState({ aposts: currentList, isLoaded: true }, () => {
             console.log(this.state.aposts, 'aposts');
            
            });
        });

在制作 api 时调用它需要一些时间，所以 JS 只需在其他进程上运行该工作，您的主进程就会继续工作。

阅读有关同步/异步的信息

当您使用.then时，JS 完成 api 调用并从服务器获取响应，它应该运行内部的任何内容.then

因此，您必须在 .then 中设置 state .then以便在获取值后为 state 设置值

---

你说你必须设置并学习设置。 你为什么不使用 [CRA][1] 它会为你设置一切。