Есть ли другой способ сделать это без необходимости размещать переменные useState вне функции карты?
const slimy = [];
{
slimy.map(function (item) {
const [count, setCount] = useState("");
return (
<ListItem
key = {item.createdAt}
style = {{ display: "flex", justifyContent: "center" }}
>
<div>
<p>{count}</p>
<button onClick = {() => setCount(count + 1)} />
</div>
</ListItem>
);
});
}
Вместо этого вы можете поместить массив в состояние:
const [countArr, setCountArr] = useState(
() => new Array(slimy.length).fill(0)
);
return slimy.map(function(item, i){
<ListItem key = {item.createdAt} style = {{ display: 'flex', justifyContent: 'center'}}>
<div>
<p>{countArr[i]}</p>
<button onClick = {() => { setCountArr(
countArr.map((count, j) => i === j ? count + 1 : count)
) }} />
</div>
</ListItem>)
});
Вы можете определить пользовательский компонент.
{
slimy.map(function (item) {
return (
<CustomItem key = {item.createdAt} names = {item.names} />
);
});
}
const CustomItem = (props) => {
console.info(props.names); // <----------------
const [count, setCount] = useState(0);
return (
<ListItem style = {{ display: "flex", justifyContent: "center" }}>
<div>
<p>{count}</p>
<button onClick = {() => setCount(count + 1)} />
</div>
</ListItem>
)
}
Итак, как я могу использовать элементы из списка в отдельном компоненте?
например, список содержит имена, где я буду отображать список имен?
так же, как item.createdAt
, где я буду использовать item.names
?
вы отметите и проголосуете, если это правильный ответ?
Давайте продолжим обсуждение в чате.
да, конечно, я буду, если я попробую, и это сработает
Да, просто сделайте jsx внутри карты другим компонентом.