javascript - react 状态之间的索引

Question

我正在尝试创建一个事件监听器，它将数据提供给子组件。

我有两个状态

[data,setData]=useState([])
[playData,setPlayData]= useState([])

我使用带 [] 参数的 fetch 和 UseEffect 从 API 获取数据，以便仅在应用启动时使用它

fetch(API_URL)
.then(res=>res.json)
.then(data=>setData(data))

在 APP 组件中，我有一个接收 playData 的子组件和一个事件监听器函数

<Children data={playData} click={getDataOnClick} />

现在我希望这个事件监听器在单击时从数据作为 Prop 一个一个地发送数据，例如下一个下一个，下一个..直到数据耗尽

所以我所做的就是定义

const box = data

和使用

function getDataOnClick (event){
setPlaydata(prevdata=>{
return [...prevdata,box[prevdata.length+1]]
}}

我收到一个错误:当我尝试用其他数组方法将其标记出来时，box is not iterable or similar。我猜数组方法在遍历状态时不起作用？？我该如何解决这个问题？？我在这里缺少一个钩子(Hook)吗？ Slice 也适用于状态和对象，我已经使它等于状态

Answer 1

您只需使用 prevdata.length 而不是 prevdata.length + 1 否则您将跳过一个元素。在推送更多内容之前，您可以检查 playData 是否包含 data 中的所有元素。

我创建了一个沙箱来执行您想要执行的操作。

function Child({ onNext, playData }) {
  return (
    <div>
      <p>{playData}</p>
      <button onClick={onNext}>Next</button>
    </div>
  );
}

export default function App() {
  const [data, setData] = useState([]);
  const [playData, setPlayData] = useState([]);

  useEffect(() => {
    const fakePromise = Promise.resolve(
      Array(50)
        .fill()
        .map((_, i) => i)
    );
    (async () => {
      setData(await fakePromise);
    })();
  }, []);

  const onNext = () => {
    setPlayData((prev) =>
      data.length === prev.length ? prev : [...prev, data[prev.length]]
    );
  };

  return (
    <div className="App">
      <Child playData={playData} onNext={onNext} />
    </div>
  );
}