在 JSX 中訪問 Map Function 之外的值

Question

新手問題在這里。 我不確定如何在 JSX 中訪問map function scope 之外的 slide.title 值並放置在其他地方。

{
  bases.map((slide, index) => {
    return (
      <div className={index === base ? "slide active" : "slide"} key={index}>
        {index === base && (
          <img alt={slide.title} className="skin" src={slide.url} />
        )}
        {index === base && <p>{slide.title}</p>}
      </div>
    );
  });
}

比方說我想在這個 function 之外的段落標記中使用這個實際的 slide.title。

<p>{slide.title}</p>

我想我可以存儲在 state 中並重新使用它，但我真的不知道該怎么做。

提前致謝

Answer 1

只需使用括號表示法查找數組中的base索引即可獲得標題：

<p>{bases[base]?.title}</p>

Answer 2

我認為 state 是您最好的選擇。

我喜歡使用 reducer，因為它允許多個狀態。

import {useReducer} from 'react';
const initialState = {
title = ""
}
const reducer = (state, newState) => ({...state, ...newState});
const [state, setState] = useReducer(reducer, initialState);

//then when you do have access to the slide.title just 
setState({title: slide.title});

這將允許您添加多個 state 項，只需將它們添加到頂部的初始 state const 中即可。