reactjs - 如果在 React Return() 中的 .map() 中带有表达式的语句

Question

我相信我遇到的问题是因为我的 map 函数在 react 的 return 方法中。这不可能吗？

需要发生的是我正在通过调查数据进行映射。我需要平均每个列。所以我要添加 column1 + column2 + column3，然后需要除以给出的响应数。我不能只除以 3，因为有些人将其中一个答案留空。所以我想出了下面的代码，但它给了我这个错误：Expected an assignment or function call and instead saw an expression

render() {
        
        return (
            <Jumbotron className="text-dark">
                <Div>
                    <Row>
                        <Col>
                            <Table striped bordered>
                                <thead>
                                    <th>Client</th>
                                    <th>Name</th>
                                    <th>Score: Consulting</th>
                                    <th>Score: Talent</th>
                                </thead>
                                <tbody>
                                    {
                                    this.state.surveyData.map((client) => {
                                    let consultingScoreDiv = 0;
                                    const consultingScore = client.value1 + client.value2 + client.value3;
                                    if (client.value1 !== ""){ consultingScoreDiv++ };
                                    if (client.value2 !== ""){ consultingScoreDiv++ };
                                    if (client.value3 !== ""){ consultingScoreDiv++ };

                                            <tr key = { client.id } >
                                                <td>{client.orgName}</td>
                                                <td>{client.name}</td>
                                                <td>{consultingScore/consultingScoreDiv}</td>
                                            </tr>
                                        }                                        
                                        
                                    )
                                    }
                                </tbody>
                            </Table>
                        </Col>
                    </Row>
                </Div>
            </Jumbotron>
        )
    }

标签： reactjs

Answer 1

You had few issue:

• You are missing the a return in your map.
• You check for empty string, instead of undefined or typeof
• you calculated the total even if there was no value there.
• You did not check division by 0.

Here's how it should look like:

{this.state.surveyData.map((client) => {
  let consultingScoreDiv = 0;
  let consultingScore = 0;
  if (typeof client.value1 === "number") {
    consultingScoreDiv++;
    consultingScore += client.value1;
  }
  if (typeof client.value2 === "number") {
    consultingScoreDiv++;
    consultingScore += client.value2;
  }
  if (typeof client.value3 === "number") {
    consultingScoreDiv++;
    consultingScore += client.value3;
  }

  return (
    <tr key={client.id}>
      <td>{client.orgName}</td>
      <td>{client.name}</td>
      <td>
        {consultingScoreDiv > 0
          ? consultingScore / consultingScoreDiv
          : 0}
      </td>
    </tr>
  );
})}