根据 `react` 数组键值动态改变状态值

Question

似乎很容易，但我不知道

{Info.seedShapeDisplayText} -> one two three four ..
one onClick <div> Hi Number Minsu, Bar : 1 </div>
two onClick <div> Hi Number Jenny, Bar : 3 </div>

综上，当点击'one li tag text'时，div会输出'one text'对应的'{NumberStatus}'值，{functionInfolabels}对应的值。

点击第一个按钮 我想打印第一个数组值Minsu和1。 你想怎么写代码？

let functionInfolabels = ProductDetail && ProductDetail.chart?.functionalsInfo?.[0].materialsInfo?.[0].ingredientsInfo?.map(array => array.ingredientDisplayText);
console.log(functionInfolabels) // Array( 1,3,124 ..)

let NumberStatus = ProductDetail && ProductDetail.chart?.functionalsInfo?.[0].materialsInfo?.[0].ingredientsInfo?.map(array => array.chartStatus) 
console.log(NumberStatus) // Array ( Minsu, Jenny, Youngmin, ...)    


return (
          {ProductDetail && ProductDetail.chart?.functionalsInfo?.length ? 
            ProductDetail.chart?.functionalsInfo.map(Info => (
            <li key={Info.id}>{Info.seedShapeDisplayText}</li>
            )) : <li>There is not</li>}

// {Info.seedShapeDisplayText} -> one two three four .. 
// one onClick <div> Hi Number Minsu, Bar : 1 </div>
// two onClick <div> Hi Number Jenny, Bar : 3 </div>
....
<div>
Hi Number {NumberStatus} //  Minsu, Jenny,  Youngmin,  Jiho ...

<Bar 
labels={functionInfolabels} // 1,  3, 124 .... 
/>
</div>


)

Answer 1

您不能将onClick 添加到您的<li> 元素中吗？

<li key={Info.id} onClick={() => setStateValue(Info.id)}> ...