Question

我只是试图访问函数外部的状态。最好的方法是什么？我只想根据状态是否为“”来渲染某些东西：

export default class Home extends Component {
    constructor(props) {
        super(props);

        this.state = {
        locationInput: "",
        data: "",
        };
    }




    validateForm() {
    return this.state.locationInput.length > 0
    }


    handleChange = event => {
        this.setState({
            [event.target.id]: event.target.value
        });
    }

    handleSubmit = event => {
        event.preventDefault();
        this.setState({data: httpGet(this.state.locationInput)})
        console.log(this.state.data)



    }

    tableRender = null;

    if(this.state.data !== "") //this is where I'm getting the 'unexpected keyword error'
    {
        tableRender = <Table data={this.state.data} />
    }
}

Answer 1

在React的有状态Component中，我们必须具有render函数来承载所有html元素。就您而言，您可以在如下所示的状态上做一个条件，以按状态值呈现

export default class Home extends Component {
  ...
  ...
  render(){
    return (
      <div>
        { this.state.data !== "" && (<Table data={this.state.data} />)}
      </div>
    )
  }
}

Answer 2

为什么不将其添加到render方法？

render(){
   if(this.state.data !== ""){
      tableRender = <Table data={this.state.data} />
   }

   return(
      <div>{tableRender}</div>
   )

}

尝试在React中的函数外部访问状态

2 个答案: