Question

我正在通过componentDidmount（）从实时数据中获取新闻。我添加了新的属性是基于对象数组中的score属性的fontsizes。但是fontsize属性未呈现。如果我使用以下方法将this.state.list存储到另一个数组中this.setState（{data：this.state.list}）。它会在一段时间后渲染。为什么？

从'react'导入React，{组件} 从“ ../Storys/Storys”导入故事导入'./Frontpage.css' 导出默认类FrontPage扩展组件{

    constructor(props){
        super(props)

        this.state ={
            storys:[],
            list:[],




        }
    }


     async componentDidMount(){
           const response = await fetch(`https://hacker-news.firebaseio.com/v0/askstories.json?print=prett`)
           const json = await response.json()
           this.setState({storys:json})
          // console.log(this.state.storys);
       for (let index = 0; index <this.state.storys.length;index++) {   
           const response1 = await fetch(`https://hacker-news.firebaseio.com/v0/item/${this.state.storys[index]}.json?print=pretty`)
           const data = await response1.json()
             this.setState([this.state.list.push(data)])

       }
       //console.log(this.state.list)
       this.state.list.sort((a, b) => (a.score > b.score) ? 1 : -1) 
        var size =10; 
       var temp=0;
        this.state.list.map(key=>{
            if(key.score===temp){
                key.fontSize=size
            }else{
                key.fontSize=size+=2;
            }
            temp= key.score;
            return key.fontSize
        })



     return this.state.list;    

 }


        render () {

               console.log(this.state.list)

             var output= this.state.list.map((key) =>{

                return <Storys style={key.fontSize} key ={key.id} score={key.score} title={key.title} 
                text ={key.text}/>


         })



            return (

                <div >
                    <section className="Arrange">
                         {output}  

                    </section>
                    <div>
                    </div>


                </div>
            );
        }
      }

从'react'导入React 导入'./Storys.css' 导出默认功能Storys（props）{

return (
    <div>   

         <div className="story">
             <div className="box col-5 bg-secondary">
                <h1 >{props.score}</h1>

             <span style={{fontSize:props.style+'px'}}> {props.title} </span>
              <p>{props.text}</p>                           

              </div>
        </div>


     </div>         

    )

} strong文字

为什么不添加基于componetDidmount（）中条件的对象数组的渲染属性

0 个答案: