Question

下午好，我从服务器获取json，进行处理，但是对render的调用发生了2次.Google，在构造函数中创建一个空对象。如果对象没有属性，则返回undefined，但是我还有一些数组，应用程序会因此崩溃。我附加了代码。如何获取状态数据？可以在渲染中获取并编写吗？

export default class Forma extends React.Component {
  constructor(props) {
    super(props);
    this.state = { data: [] };
  }

  componentWillMount() {
    fetch("http://localhost:3001")
      .then(response => response.json())
      .then(result => this.setState({ data: result }))
      .catch(e => console.log(e));
  }

  render() {
    const { data } = this.state;

    return <h1>{console.log(data.goals[0].gs_id)}</h1>; //падает
  }
}

Answer 1

使用一个额外的状态值，您可以在数据完成获取后进行切换。这将有助于防止尝试在空数组中使用对象属性。

export default class Forma extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      loading: true,
      data: []
    };
  }
  componentDidMount() {
    fetch('http://localhost:3001')
      .then(response => response.json())
      .then(result => this.setState({ loading: false, data: result }))
      .catch(e => {
        this.setState({ loading: false })
        console.log(e)
      });
  }

  render() {
    const { loading, data } = this.state;

    if (loading) {
      return <span>Loading</span>;
    }

    if (!data || data.length === 0) {
      return <span>No items found</span>;
    }

    return <h1>{data.goals[0].gs_id}</h1>;
  }
}

Answer 2

不推荐使用componentDidMount代替componentWillMount。

这是克里斯托弗（Christopher）对处理异步操作的回答中的一个很好的补充。

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      data: []
    };
  }
  componentDidMount() {
    fetch("https://jsonplaceholder.typicode.com/todos")
      .then(response => response.json())
      .then(result =>
        this.setState({
          data: result
        })
      )
      .catch(e => console.log(e));
  }
  render() {
    const { data } = this.state;

    return <h1> {data[0] ? data[0].title : 'Loading'} </h1>;
  }
}
ReactDOM.render(<App />, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>

如何取得反应？

2 个答案: