Question

在控制台中执行查询后，我可以看到：{data:{action: [...]}。如何将数据分配给React组件中的变量？

尝试此操作，但不起作用：

class MyGraph extends React.Component {
    constructor(props) {
        super(props);
      this.state = {
            nodes: this.data

Answer 1

state.node的初始值虚假或为空。然后在componentDidMount中获取数据-成功后，用您的实际数据更新state.node。该数据也可以向下传递到子组件。示例：

class MyGraph extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      nodes: null,
    }
  }

  componentDidMount() {
    // w/e your fetch function is. I'm assuming your method uses promises.
    fetchDataSomehow().then((response) => {
      this.setState({nodes: response.data}) // or whatever property has the nodes
    })
  }

  render() {
    const nodes = this.state.nodes;

    return (
      <LoadingIcon isVisible={!nodes}>
        {(nodes || []).map((node) => (
            <MyCircle key={node.someUniqueId} node={node} /> // access `node` inside the `<MyCircle />` component using `this.props.node`
          ))}
      </LoadingIcon>
    )
  }
}

您需要处理仍在加载数据的情况下发生的事情（例如，伪造的<LoadingIcon />组件）。

ReactJS / JavaScript：访问查询结果

1 个答案: