在 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 中即可。