React - 渲染JSON数据时清空数组

Question

为什么渲染这个JSON数组时会创建一个空数组？ See attached screenshot我假设构造函数只是使用null值启动它并在稍后填充它。

Javascript + React的新手，只是想确保我了解正在发生的事情。我也接受对下面的垃圾代码的批评。 Codepen link

class Jobs extends React.Component {
  render() {
    const jobs = this.props.jobs;
    console.log(jobs);
    const formattedJobs = jobs.map((job) =>
      <ul key={job.id}> 
        <div class="company">{job.company_name}</div>
        <div class="title">{job.title}</div>
      </ul>
    );
    return(
      <div>{formattedJobs}</div>
    );
  }
}

class App extends React.Component {
  constructor() {
    super();
    this.state={
      jobs:[]
    }
  var myUrl = "https://codepen.io/jobs.json";
  fetch(myUrl)
    .then((response) => response.json())
    .then((json) => this.setState({jobs: json.jobs}));
  }

  render() {
    return (
    <div className="app">
      <div className="header">
        <h1 id="header-title">Job Postings</h1>
      </div>
      <div className="content">
        <Jobs jobs={this.state.jobs}/>
      </div>
    </div>
    );
  }
}

ReactDOM.render(
  <App />,
  document.getElementById('root')
);

Answer 1

您正在从异步的ajax请求中获取作业。这就是为什么初始值是一个空数组。

App.render在您的ajax请求完成之前执行，这就是为什么您没有为Jobs组件提供任何工作。 ajax完成后，jobs数组将填充结果并发送到Jobs组件以呈现该ajax请求的结果。

Answer 2

总是在ComponentDidMount中使用fetch语句，因为它是在第一次呈现组件后调用的

ComponentDidMount {
 fetch(myUrl)
    .then((response) => response.json())
    .then((json) => this.setState({jobs: json.jobs}));
}

Answer 3

作业组件

• 对于默认道具总是很好 - 组件可以/将在fetch返回响应之前呈现
• 将class替换为className，因为第一个是JSX
中的限制词
• ul只能包含li个孩子 - 而不是div
• 在迭代集合时使用key属性很好

应用程序组件

• 有支持意外响应的地方，你可以设置像error这样的新状态并支持它
• 请考虑组件负责支持错误和旋转器 - App或Jobs

Ract应用程序

class Jobs extends React.Component {
  render() {
    const { jobs } = this.props;
    const formattedJobs = jobs.map(job =>
      <ul key={job.id}>
        <li className="company">{job.company_name}</li>
        <li className="title">{job.title}</li>
      </ul>
    );

    return <div>{formattedJobs}</div>;
  }
}

Jobs.defaultProps = {
  jobs: []
};

class App extends React.Component {
  constructor() {
    super();
    this.state = {
      jobs: []
    };
  }

  componentDidMount() {
    fetch("https://codepen.io/jobs.json")
      .then(response => response.json())
      .then(response => {
        if (!Array.isArray(response.jobs)) {
          throw new Error(
            `Expected response but got ${JSON.stringify(response.jobs)}`
          );
        } else {
          return response.jobs;
        }
      })
      .then(jobs => this.setState({ jobs }));
  }

  render() {
    return (
      <div className="app">
        <div className="header">
          <h1 id="header-title">Job Postings</h1>
        </div>
        <div className="content">
          <Jobs jobs={this.state.jobs} />
        </div>
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("root"));