刷新后，React道具变成不确定的

Question

我是从API中获取的，在该API中，我想从app.js将响应对象作为prop将其传递给子组件，然后在我的tags.js文件中使用它。但是，它仅在一次后起作用，当我刷新它时，它给我一个错误，说props.response.names.length是未定义的。我尝试使用使用效果函数尝试更新它，但它不起作用。感谢任何帮助。

我的app.js文件（仍然是运行“ npx create-react-app my-app”时的一些残余物））：

import './App.css';
import Tags from './Tags.js';
import React, { useState, useEffect } from 'react';

function App() {

  const makeRequest = async () => {
    try {
      let response = await fetch('RANDOM_API_URL');
      let json = await response.json();
      setResponse(json);
    } catch (error) {
      console.log(error);
    }
  }

  const [response, setResponse] = useState(makeRequest);

  useEffect(() => {
    setResponse(makeRequest);
  }, []);

  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
      <Tags response={response}></Tags>
    </div>
  );
}

export default App;

我的tags.js：

import './App.js';

function Tags(props) {
  const makeButtons = () => {
    let result = [];
    for (let i = 0; i < props.response.names.length; i++) {
      result.push(<button key={i}>hello</button>);
    }
    return result;
  }

  return (
    <div>
      {makeButtons()}
    </div>
  );
}

export default Tags;

Answer 1

您的makerequest功能是异步的，并在内部设置状态。获得此错误的原因是，您并不总是有一个wenders.names要读取长度 - 您只有一个空响应对象。

要么确保您始终具有状态中可用的name数组，要么避免在状态中不存在名称时呈现标签组件。

另外，尝试避免使用您的依赖阵列创造性，它是有原因的。我明白为什么您在其中不包含makerequest，因为您在每个渲染上创建一个新功能。当您从类组件过渡到功能组件时，这是要牢记的。类方法在各个渲染中都是稳定的，功能组件中声明的函数却不是。要模仿类方法，您可以使用usecallback挂钩声明功能，但是您需要再次包含依赖项数组。在您的情况下，您可以在使用效果内创建异步函数，然后调用它。

const [response, setResponse] = useState({names: []});
// or const [response, setResponse] = useState();
// and then, in Tags:
// function Tags({response = {names: []}) {

useEffect(() => {
  const makeRequest = async () => {
    try {
      let response = await fetch('RANDOM_API_URL');
      let json = await response.json();
      setResponse(json);
    } catch (error) {
      console.log(error);
    }
  }
  makeRequest();
}, []);

向标签提供默认的响应 Prop prop将确保您甚至可以在响应之前读取name的长度。

更仔细地查看您的标签组件，我认为应该是这样的：

// don't import App.js here

export default function Tags({response = {names: []}){
  return (
    <div>
      {response.names.map(name => {
        return <button key={name}>Hello {name}</button>
      })}
    </div>
  )
}

不要使用索引作为钥匙，如果您重新排列数组中的名称，就会引起问题。而且我想您想为按钮提供一个单击功能。