Question

我已经阅读了许多文档，甚至是react docs的文档，都介绍了如何从本地服务器获取数据。由于某些原因，我无法使事情动起来。

这是项目的逻辑：

我已经在端口5000上设置了快递服务器
在此目录中创建了client /文件夹，并安装了create-react-app
然后在端口3000上启动npm start。

package.lock包含以下行："proxy":"localhost:5000/"，因为这是必需的。我可以在“网络”标签中看到正在接收的数据。

但是它并未显示，实际上下一段代码中的data是未定义的（是的，未定义，谁知道发生了什么）。这是获取和显示数据的功能：

function App() {
  const [text, setText]=useState("")
  const [data, setData]=useState("")
  useEffect( () => {
    fetch("/elements/"+text)
      .then(res=>{ res.json() })
      .then(data=>{ setData(data) })
      .catch(err=>console.log("cant find that data"))
  }, [text])
  const myF = ()=>{
    let elements = []
    data.forEach(atom => {
      const name=Object.keys(atom)
      elements.push(
        <div key={atom[name].symbol} className="atom">
        <h1>{atom[name]}</h1>
        </div>)
    })
    return elements
  }
  return (
    <div className="App">
    <input type="text" placeholder="type name here..." value={text} onChange={e => setText(e.target.value)}/>
    <div className="atomsGrid">
    {data ? myF : <h1>Waiting...</h1> }
    </div>
    </div>
  )
}

就像获取了数据一样，但是此函数上的所有内容都是未定义的。

能给我一些想法吗？

Answer 1

是的，因为您没有return语句，而不返回则表示undefined。您可以写return或删除花括号

fetch("/elements/"+text)
  .then(res=> res.json())
  .then(data=>{ setData(data) })
  .catch(err=>console.log("cant find that data"))

或带有return语句：

...
.then(res=> { return res.json() })
...

从本地服务器获取反应显示不可能

1 个答案: