Question

我正在使用API创建react 360应用程序以获取数据，然后将其显示在面板上。下面，我有以下代码：

export class CryptoControlInformation extends React.Component {


  state = {
    details: {
      description: '',
      links: [],
    }
  };

  componentDidMount() {
    const CRYPTO_CONTROL_PATH = 'https://cryptocontrol.io/api/v1/public/details/coin/bitcoin?key=some_key';
    fetch(CRYPTO_CONTROL_PATH)
      .then(response => response.json())
      .then(data => {this.setState({
        details: {
          description: data["description"],
          links: [...this.state.details.links, ...data["links"] ]
      }})
    })
  }

  render() {
    let links = this.state.details.links;

    ##################################
    console.log(links[0])
    {_id: "5b41d21fa8a741cf4187ec60", type: "reddit", name: "r/Bitcoin Reddit", link: "https://reddit.com/r/Bitcoin/"}
    ####################################


    ####################################
    // Why is this returning undefined? 
    console.log(links[0]["name"]);
    ####################################

    return (
      <View>
        <View style={styles.rightHeader}>
          <Text style={{fontSize: 40}}>Information</Text>
        </View>
        <View>
          <Text>{this.state.details.description}</Text>
        </View>
        <View>
          <Text>{this.state.details.description}</Text>
        </View>
      </View>
    )
  }
}

我无法在对象内部获取信息，也不知道为什么。我知道那里的信息。我可以console.log完整地记录对象，但是各个部分是不确定的。我究竟做错了什么？我注意到在反应中，必须始终明确地详细说明状态。

例如，我发现我不能只是这样做：

export class Square extends React.Component {
  state = {
   info: undefined
  };

   componentDidMount() {

     // grab information (pseudocode)

     this.setState{info: data}
   }
}

我必须实际绘制出令人讨厌的数据：

export class Square extends React.Component {
  state = {
   info: {
     color: '',
     height: '',
     width: '',
   }
  };

   componentDidMount() {

     // grab information (pseudocode)

     this.setState{info: {
         color: data['red'],
         heigth: data['height'],
         width: data['width']
       }
     }
   }
}

我认为这与我的问题有关。我在正确的轨道上吗？

Answer 1

标准计时问题-您不是在寻找“未定义的反应”，对吧？

当组件加载数据render时（最少）被调用两次（最少）-一次在初始安装时（不包含数据），第二次在数据到达时（setState强制进行新渲染）

console.log（chrome）欺骗您，以静默方式更新以前的消息

您可以使用map-在最初为空数组时可以正常工作-或检查jsx中的值是否准备就绪

{!links.length && <Text>{links[0]["name"]}</Text/>}

...有条件地调用渲染函数，更早返回<Loading />，等等。

不需要使用setState和功能（Varun的评论），这样更安全（在某些情况下），但不是强制性的

为什么我的反应状态数据在react中未定义？

1 个答案: