Javascript 如何在React中的render as表中显示JSON数据

我使用的API返回各种不同键值对的JSON。我试图将它们显示在

render（）

中，作为一个包含键和值两列的表，其中分别包含对象键和值

fetchBasicDetails（）

中的API是POST，它将默认this.state值作为输入并返回JSON输出

然后使用

setState

方法将JSON输出对象存储到this.state的birth\u details属性中

然后，我尝试使用

forEach

和object.keys在

标记中显示对象数据，这根本不显示任何内容 感谢您的帮助。多谢各位

export default class HoroscopeReport extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      day: 11,
      month: 2,
      year: 2019,
      hours: 12,
      minutes: 59,
      tzone: 5.5,
      lat: 19.22,
      lon: 25.2,
      birth_details:{}
    };
  }

  handleSubmit = event => {
    event.preventDefault();
    //console.log("Received user submitted data"+JSON.stringify(this.state))
    this.fetchBasicDetails();
  };

  fetchBasicDetails() {
        let myHeaders = new Headers();
        myHeaders.append("Content-Type", "application/x-www-form-urlencoded");
        myHeaders.append("Authorization", "Basic XXXXXXXXXXXXXXX");

        let urlencoded = new URLSearchParams();
        urlencoded.append("day", this.state.day);
        urlencoded.append("month", this.state.month);
        urlencoded.append("year", this.state.year);
        urlencoded.append("hour", this.state.hours);
        urlencoded.append("min", this.state.minutes);
        urlencoded.append("lat", this.state.lat);
        urlencoded.append("lon", this.state.lon);
        urlencoded.append("tzone", this.state.tzone);

        let requestOptions = {
          method: 'POST',
          headers: myHeaders,
          body: urlencoded,
          redirect: 'follow'
        };

        fetch("https://json.astrologyapi.com/v1/birth_details", requestOptions)
          .then(response => response.text())
          .then(result => {
            this.setState({ birth_details: result });
          })
          .catch(error => console.log('error', error));
       }

  render() {

    return (
      <div>
{/* FORM SUBMITTION CODE HERE */}
              <h2>Output:-</h2>
              <table border={2} cellPadding={5}>
                <thead>
                  <tr>
                    <td>Key</td>
                    <td>Value</td>
                  </tr>
                </thead>
                <tbody>
                  Object.keys(this.birth_details).forEach(function (element) {
                  return <tr><td>element</td><td>this.birth_details[element]</td></tr>;
                  });
                </tbody>
              </table>
      </div>
    );
  }
}

---

通常使用

map（）

而不是

forEach（）

处理基于React中数组的渲染元素。原因是使用

map（）

可以在迭代过程中操作每个元素，并为

render

方法返回一个完全合适的JSX语法。同时，

forEach（）

不返回任何内容，只返回

未定义的

我想你可以尝试以下方法：

render() {
    return (
      <div>
        <h2>Output:-</h2>
        <table border={2} cellPadding={5}>
           <thead>
              <tr>
                <td>Key</td>
                <td>Value</td>
              </tr>
           </thead>
           <tbody>
              {
                  this.state.birth_details && 
                  Object.keys(this.state.birth_details).map(function (element) {
                     return <tr>
                       <td>{element}</td>
                       <td>{this.state.birth_details[element]}</td>
                     </tr>;
                  });
              }
           </tbody>
        </table>
      </div>
    );
}

render（）{
返回(
输出：-
钥匙
价值
{
this.state.birth_详细信息（&U）
Object.keys（this.state.birth_details）.map（函数（元素）{
返回
{element}
{this.state.birth_details[element]}
;
});
}
);
}

---

我希望这有帮助

请记住，您需要在JSX中使用大括号来表示您想要呈现值，而不是像文本一样呈现代码

您还需要使用

map

而不是

forEach

map

用于将数组转换为其他数组（我们获取字符串列表并将它们映射到React元素），而

forEach

用于仅对每个元素执行某些操作，而不返回任何内容

此外，您可能指的是

this.state.birth\u details

，而不是

this.birth\u details

>

<tbody>
{
  Object.keys(this.state.birth_details).map(function (element) {
    return (
      <tr key={element}>
        <td>{element}</td>
        <td>{this.state.birth_details[element]}</td>
      </tr>
    );
  })
}
</tbody>

{
Object.keys（this.state.birth_details）.map（函数（元素）{
返回(
{element}
{this.state.birth_details[element]}
);
})
}

---

我还对返回的元素设置了

键

。阅读React中有关列表和键的更多信息。

Oops，我没有注意到您发布了答案！在手机上发帖的缺点，我想：o）@cubrr没有问题，这种情况会发生。：）虽然这确实有助于打印对象数据，但它是按字符方式打印的！也就是说，键值列中的输出类似于进行提取的代码中的

0{，1'，2y，3e，4a，5r

@VaibhavDwivedi，将

response=>response.text（）

更改为

response=>response.json（）

。这会为您解析json，因为目前您只是将json作为字符串而不是对象。

<tbody>
{
  Object.keys(this.state.birth_details).map(function (element) {
    return (
      <tr key={element}>
        <td>{element}</td>
        <td>{this.state.birth_details[element]}</td>
      </tr>
    );
  })
}
</tbody>