反应渲染变量未定义

Question

出于某种我不明白的原因，我似乎无法在我的渲染器中获取状态值，起初我认为这是一个范围问题，但即使在更改为 var 之后，我的变量仍未定义。

constructor(props) {
        super(props);
        this.state = {
            stuff: {}
        };

 componentDidMount(){
                
            this.getatuff.then( (result) =>{
                    this.setState({
                        stuff: result.items[0]
                });
            });
        console.log('REACT Coveo component DOM loaded');

    }
    render() {
        var ReactMarkdown = require('react-markdown');
        var project = this.state.stuff;
        
        debugger;
        if(!Object.entries(project).length === 0){
            var asd = project.body[1].value; <---UNDEFINED
            return (
                <div className="block"> 
                    <ReactMarkdown source={asd} />
                    </div>               
            );
        }

为什么我的对象数组值在渲染器中未定义？

注意：屏幕截图中的两个 const 变量都已更改为 var，并且该行为仍然存在。

Answer 1

您需要在 class 或 constructor() 中定义 state:

constructor(props) {
  super(props);

  this.state = {
    project: // something
  }
}

componentDidMount() { 
  // etc.

Answer 2

您的示例并不清楚您要实现的目标，但这可能是以下原因之一：

在你的 componentDidUpdate 中你有一个错字 this.getatuff （我假设你想说 getStuff
project 似乎在您的渲染器上定义，您的屏幕截图显示它有一个键 id:5 和其他一些键，但它可能没有键 body 或 body 可能不是数组，或者数组可能只包含 1 个值 [0] 而不是两个值 [0] 和 [1]。我建议你调试 project 的结构以获得正确的值

Answer 3

这里出现语法错误：if(!Object.entries(project).length === 0) 应该是 if (!(Object.entries(project).length === 0))

render() {
    var ReactMarkdown = require('react-markdown');
    var project = this.state.stuff;

    debugger;
    if (!(Object.entries(project).length === 0)) {
        var asd = project.body[1].value; <---UNDEFINED
        return (
            <div className="block"> 
                <ReactMarkdown source={asd} />
                </div>               
        );
    }

反应渲染变量未定义

react render variable undefined

renderer

reactjs