reactjs - 如何在 React 中设置初始状态以在按需获取数据之前不显示任何内容？

Question

我想显示从 API 获取的数据。API url 基于用户输入。一旦用户输入并单击提交，它应该显示获取的数据。但是在用户点击提交之前，它应该什么都不显示。

我遇到的问题是，当在 html 的列表中呈现用户的数据时，在用户输入任何内容之前，map 函数在 property{} 上不存在。我应该将什么设置为初始状态？

转换后的数据工作正常。console.log(transformedData) 印刷

我想将每个标题显示为列表。示例用户输入可以是0x147412d494731cbb91dbb5d7019464a536de04dc

import { useState } from "react";

// example user:  0x147412d494731cbb91dbb5d7019464a536de04dc

function App() {
  const [data, setData] = useState({});
  const [enteredWallet, setEnteredWallet] = useState("");
  const [owner, setOwner] = useState("");

  const walletChangeHandler = (event) => {
    setEnteredWallet(event.target.value);
  };

  const submittedHandler = (event) => {
    event.preventDefault();
    setOwner(enteredWallet);
    fetchNFTHandler();
  };

  function fetchNFTHandler() {
    fetch(
      `https://api.opensea.io/api/v1/assets?owner=${owner}&order_direction=desc&offset=0&limit=10`
    )
      .then((res) => {
        return res.json();
      })
      .then((data) => {
        const transformedData = data.assets.map((element, index) => {
          return {
            title: element.name,
            id: index,
          };
        });
        setData(transformedData);
        console.log(transformedData);
      });
  }

  return (
    <div className="App">
      <header className="App-header">
        <h3>Show me assets in this wallet</h3>
        <form onSubmit={submittedHandler}>
          <input
            placeholder="wallet address"
            value={enteredWallet}
            onChange={walletChangeHandler}
          />
          <button>Submit</button>
        </form>
        <div> 
          console.log(data)
          {/* {data.map((element) => (<li key={element.id}> 
 {element.title}</li>))}
 */}. 
{/* here is the problem. before user input, this map function doesn't work */}
        </div>
      </header>
    </div>
  );
}

export default App;

标签： reactjs