Question

我的渲染器中有这个

{this.availProps(this.state.data)}

this.state.data使用componentOnMount时的获取进行更新

availProps = data =>{
    if (data.length == 0) 
        return (
            <option>"hello"</option>
        )
    else 
    return (    
        <option> "hi" </option>
        )
}

在完成数据提取后，它会很好地打印出“ hi”。但是，如果我使用：

{this.availProps()}

和

   availProps = () =>{
        if (this.state.data.length == 0) 
            return (
                <option>"hello"</option>
            )
        else 
        return (    
            <option> "hi" </option>
            )
    }

它不起作用。而是打印出“ hello”。

这是因为仅在“渲染”中的变量被更改/更新时才重新渲染页面吗？（在本例中为this.state.data）

谢谢

编辑：这是componentDidMount

componentDidMount() {
    this.getDataFromDb()
}


getDataFromDb = () => {
    fetch("http://localhost:3001/api/property")
      .then(property => property.json())
      .then(res => this.setState({ data: res.data }))
      .then(() =>{
          for(var i = 0; i < this.state.data.length; i++) {
              if (this.state.data[i].status == 0)
                  this.state.useData.push(this.state.data[i])
          }
      }).then
    ( ()=> console.log(this.state.useData))
};

Answer 1

直接在<section id="clan-profile"> <div class="container"> <div class="row pt-4 pb-4"> <div class="col-12 col-md-6"> <div class="row pb-1"> <div class="col-12"> <h2>Lorem Ipsum</h2> <h5>Lorem Ipsum</h5> </div> </div> <div class="row pt-1 pb-1"> <div class="col-12"> <img src="https://via.placeholder.com/50x50" alt="" class="img-fluid rounded-circle"> <img src="https://via.placeholder.com/50x50" alt="" class="img-fluid rounded-circle"> <img src="https://via.placeholder.com/50x50" alt="" class="img-fluid rounded-circle"> </div> </div> <div class="row pt-1 pb-1"> <div class="col-12"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit, nulla, sed. Sunt, quo reprehenderit cum ut nihil dolor saepe. Culpa at velit, possimus iste eum ipsum similique sapiente neque aliquam. </div> </div> </div> <div class="col-12 col-md-6 pt-3"> <img src="https://via.placeholder.com/500x200" alt="clan-img" class="img-fluid"> </div> </div> </div> </section>上设置属性不会调用render方法。

您将不得不使用<div class="container"> <div class="emoji"> 👤 </div> </div> .container { width: 50px; height: 50px; background-color: #f00; overflow: hidden; } .emoji { font-size: 50px; width: 50px; height: 50px; }，以便对运行render方法的某些更改做出反应。

并且由于所设置的状态基于先前的状态，因此最好使用状态更新程序模式及其回调，以便在尝试访问更新的状态时可用。

Do not update state directly

this.state

Answer 2

如果更改了props或state中的值（在渲染器或渲染器正在调用的函数中使用），则组件将默认重新渲染。

如果您有一个类级变量，例如this.example，并且在渲染器中使用了该变量，则更改该值不会使组件重新渲染。

如果您希望这样做，还可以重写shouldComponentUpdate以防止在props或state的某些值更改时重新渲染组件。您可以阅读有关该here的更多信息。正如它所说的那样，除非您确信自己处理正确，否则不建议这样做。

编辑

另一个答案表明，只有使用this.setState更新的值才会引起重新渲染。做类似的事情：

this.state.useData.push(this.state.data[i])

不会导致它更新。我建议对getDataFromDb进行以下更改以解决此问题

getDataFromDb = () => {
    fetch("http://localhost:3001/api/property")
        .then(property => property.json())
        .then(res => {
            this.setState({ data: res.data, useData: res.data.filter(item => item.status === 0) });
        }).then
            ( ()=> console.log(this.state.useData))
};

顺便说一句，setState是异步的，因此console.log上的.then不一定会看到此更改。

为什么您需要传递this.state.example才能重新呈现页面？

2 个答案: