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

Posted 2023-02-22

【中文标题】根据 `react` 数组键值动态改变状态值

【英文标题】：Dynamically change state value according to `react` array key value

【发布时间】：2021-12-24 21:02:47

【问题描述】：

似乎很容易，但我不知道

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>


)

【问题讨论】：

你能把这个清理干净再问一遍吗？

@RobertRocha 点击第一个按钮我要打印第一个数组值Minsu和1。

@RobertRocha // JSON 数据以这种格式形成。图表：功能信息：数组（5） 0：材料信息：数组（1） 0：igredientsInfo：数组（1） 0：图表状态：“minsu”成分显示文本：1 1：材料信息：数组（1） 0：igredientsInfo：数组（1） 1：chartStatus：“Jeeny”成分DisplayText：3 ...

【参考方案1】：

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

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

【讨论】：

点击第一个按钮我要打印第一个数组值Minsu和1。

所以NumberStatus 依赖于您设置的Info.Id？恐怕你的代码让我感到困惑。 Info.Id 有什么关系？

这里的困惑在于理解 Info.Id 如何与您的整体 ProductDetails 关联。由于我们看不到示例对象，因此很难理解您要完成的工作。

// JSON 数据以这种格式形成。图表：功能信息：数组（5） 0：材料信息：数组（1） 0：igredientsInfo：数组（1） 0：图表状态：“minsu”成分显示文本：1 1：材料信息：数组（1） 0：igredientsInfo：数组（1） 1：chartStatus：“Jeeny”成分DisplayText：3 ...