时间戳

首页 > 解决方案 > React：如何从以下 json 创建表

json - React：如何从以下 json 创建表

问题描述

我使用 python 创建了以下 API 对象，并使用烧瓶将其传递给 React。

在此处输入图像描述

我试图将所有结果绘制成这样的表：

日期 PS2 ps2模拟器 ps2游戏
2020-01-26 64 61 52
2020-0202 70 45 71

现在我试图添加到表格中，但我只能显示日期，因为它是我知道的唯一值。所有其他的都因用户输入而异。所以 ps5、ps2 模拟器等会根据用户输入而改变。

我的代码如下：


  state = {
    kws :[]
  }

keyword = e => {
    e.preventDefault();
    axios.post("/trends",{search_keyword: document.getElementById("keywords").value})
    .then((res) => {
  
      const data = res.data

      const keyword = []

      for (var i in data)
      {
      keyword.push(data[i])}

      console.log("this is variable keyword: " , keyword[1])

      this.setState({kws: keyword[1]})
      


    }
    )}

ender() {

    const {kws =[]} = this.state
    return (
....

        <Table hover>
            <thead>
              <tr>
                <th>Keyword</th>
                <th>Serarch Volume</th>
              </tr>
            </thead>
            <tbody>


            {kws.length ? kws.map(kws => (

              <tr>
                <td>{kws.date}</td>
                <td>{kws.}</td>
                <td>{kws.}</td>
                <td>{kws.}</td>
              </tr>



              )):(

            <h1> Loading </h1>)
            }
            </tbody>
        </Table>

)

还有我格式化这个json对象的方式是否正确？或者我应该以不同的方式格式化它？

标签： jsonreactjs

解决方案

像这样更新您的表格元素

替换下面的部分

         <Table hover>
            <thead>
              <tr>
                <th>Keyword</th>
                <th>Serarch Volume</th>
              </tr>
            </thead>
            <tbody>


            {kws.length ? kws.map(kws => (

              <tr>
                <td>{kws.date}</td>
                <td>{kws.}</td>
                <td>{kws.}</td>
                <td>{kws.}</td>
              </tr>
              )):(

            <h1> Loading </h1>)
            }
            </tbody>
        </Table>

有了这个

{kws.length > 0 ? (
  <Table hover>
      <thead>
          <tr>
              {Object.keys(kws[0]).map((key) => (
                  <th>{key}</th>
              ))}
          </tr>
      </thead>
      <tbody>
          {kws.map((kwsVal) => (
              <tr>
                  {Object.values(kwsVal).map((val) => (
                      <td>{val}</td>
                  ))}
              </tr>
          ))}
      </tbody>
  </Table>
) : <div>No data available</div>}

我建议您不要使用诸如此类的硬编码做法{kws.date}。在进行进一步更新时会导致严重问题。

看看上面实现中使用的Object.values()，Object.keys() 。

更新： 如果您想为表格使用特定的对象值，例如日期、ps2 等，您可以这样做。只需更换

const { kws = [] } = this.state;

有了这个

const kws = this.state.kws.map(({date, ps2}) => ({date, ps2}));

在这里，我使用对象解构将给定数组转换为只有两个键即日期和 ps2 的对象数组。您可以添加任何您想要的键，而不是我使用的两个即日期，ps2。

更新 1 ： 您需要将 userInputList 存储为状态，然后您可以获得一个对象数组，该数组仅具有像这样存在于 userInputList 中的键：值对。

const kws = this.state.kws;
let userInputList = ['date', 'ps3'];
let newKws = kws.map((k) => Object.fromEntries( userInputList.map( x => [x, k[x]]) ));
console.log(newKws);

在这里，userInputList 是用户作为输入提供的值数组，newKws 是所需的输出。您将需要根据用户输入从终端管理此数组，查看上述实现中使用的Object.fromEntries()以获得更多说明。

推荐阅读