使用react将JSON格式的字符串解析为对象

ha5z0ras  于 2023-11-20  发布在  React
关注(0)|答案(1)|浏览(194)

我对react完全是个新手,我做了一些简单的应用程序,从后端接收一个字符串。
字符串看起来像:
[{“name”:“大卫”,“age”:“20”},{“name”:“迈克尔”,“age”:“10”}]
现在我设法把它变成一个字符串,并把它呈现在网站上,我找不到正确的方法把这个字符串变成一个对象,并访问它的值来创建一个表,显示不同对象的细节。
我发现了一个函数JSON.parse(obj),但我想我用错了。
我正在添加App.js中的代码,目前正在网站上呈现。

function App() {

  const [items, setItems] = useState([])

  // Using useEffect for single rendering
  useEffect(() => {
    // Using fetch to fetch the api from
    // flask server it will be redirected to proxy
    fetch("/data")
      .then((res) => res.json()
        .then((data) => setItems(data))
      );
  }, []);

  return (
    <div className="App">
      {items.map(item => {
        return <pre>{JSON.stringify(item)}</pre>
      })}
    </div>
  );
}

export default App;

字符串

x759pob2

x759pob21#

你只需要简单地做到这一点:

return(
        <table>
          <thead>
            <th>name</th>
            <th>age</th>
          </thead>
          <tbody>
            {items.map((item: any) => {
              return (
                <tr>
                  <td>{item.name}</td>
                  <td>{item.age}</td>
                </tr>
              )
            })}
          </tbody>
        </table>
    )

字符串
res.json()已经将你的数据转换成JSON,所以你不需要做任何额外的事情。你可以去使用你的数据。
在你的.map()方法中,item是你需要使用的对象,你可以简单地通过执行item.propertyName来访问它的属性,就像你在我分享的代码中看到的那样。

相关问题