如何通过“预期分配或函数调用，而不是看到一个表达式”错误 Javascript

Question

Total React Noob 在这里，只是试图在我的数组中的所有标题下划线以及向它们添加一个 onclick 函数，但我不断收到“预期分配或函数调用，而是看到一个表达式”错误，什么我做错了吗？？

const result_html = [];
  const link_underline = {
    color: 'blue',
    textDecoration: 'underline',
    cursor: 'pointer'
  };

  


  for (let  result of props.results) {
    result_html.push(<li key={result.job_id.raw}>{result.business_title.raw}</li>);
    result_html.push(<li key={result.job_id.raw}>{result.job_description.raw}</li>);
    result_html.push(<li key={result.job_id.raw}>{result.preferred_skills.raw}</li>);
    <span style={link_underline} onClick={result.job_id.raw}>{result.business_title.raw}</span>
    
  }
  


  return (
    <main className="main main--details">
      <h2>Results:</h2>
      <ul>
        {result_html}
      </ul>
      <div>
      </div>
    </main>
  );
  }

Answer 1

for 循环中的第 4 行只是一个没有赋值的元素，将其移至 return 语句或将其推送至 result_html

Answer 2

如果你想在这里遵循 react 组件模式，真正的问题是尝试拆分 for 循环并创建一个只显示单个结果的组件，你会发现它更容易构建。

  const Result = props => {
    const link_underline = {
      color: 'blue',
      textDecoration: 'underline',
      cursor: 'pointer'
    };
    const { result } = props;
    return (
      <ul>
        <li key={result.job_id.raw}>{result.business_title.raw}</li>
        <li key={result.job_id.raw}>{result.job_description.raw}</li>
        <li key={result.job_id.raw}>{result.preferred_skills.raw}</li>
        <li><span style={link_underline} onClick={result.job_id.raw}>{result.business_title.raw}</span></li>
      </ul>
    )
  }

// in the original component

return (
  <main className="main main--details">
    <h2>Results:</h2>
    {results.map((result, i) => <Result key={i} result={result} />)}
    <div>
    </div>
  </main>
);