我在 JSX 反应组件中获取数据时遇到问题答案

【问题标题】：I have problem with fetching data in JSX react component我在 JSX 反应组件中获取数据时遇到问题
【发布时间】：2020-08-24 04:06:51
【问题描述】：

我想从 swapi 获取数据并用这些数据做 jsx 组件，但是当我想使用这些数据时反应给我一个错误这是我的收获

var promise = await fetch('https://swapi.dev/api/people/1/')
  .then((res) =>  res.json() )
  .then(data => setLuke(data.data))

这是反应错误：

对象作为 React 子级无效（找到：[object Promise]）。如果您打算渲染一组子项，请改用数组。 我不知道该怎么办你能帮我解决这个小问题吗

【问题讨论】：

show your render.. 可能你只是在渲染 promisee ？
const Main = async() => { const [luke, setLuke] = useState() var req = async () => { var promise = await fetch('swapi.dev/api/people/1/').then((res) => res. json() ).then(data => setLuke(data.data)) console.log(luke) } useEffect(() => req()) return ( {luke} >) }
响应中的data.data 可能是一个对象。
你 Main 是异步的。并希望你正在渲染主......所以这是一个承诺。您应该删除 Main 中的 async 并尝试一下

【解决方案1】：

您可能正在渲染您的 promise var 而不是 {luke}。另请注意，data 将是一个 json 对象，因此您将无法直接渲染它。您需要先对其进行字符串化。您当前使用的 data.data 也将是未定义的。就用data吧，里面已经包含json了。

await fetch("https://swapi.dev/api/people/1/")
      .then(res => res.json())
      .then(data => {
        setLuke(JSON.stringify(data));
      });

然后您应该能够使用{luke} 渲染它

【讨论】：