尝试访问 React 函数之外的状态

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

你为什么不把它添加到渲染方法中？

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

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

}

Answer 2

在 React 的有状态组件中，我们必须有 render 函数来承载所有 html 元素。在您的情况下，您可以对如下状态进行条件设置以按状态值呈现，

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

尝试访问 React 函数之外的状态

Trying to access state outside of a function in React

state

this

reactjs