Блог

У меня есть li key={Info.id} gt; Я хочу lt;divgt;{NumberStatus} lt;/divgt; вывести данные, соответствующие id значению, при нажатии на соответствующее значение идентификатора.

Таким образом, при нажатии на «один текст тега li» div выведет значение » {NumberStatus}», соответствующее «одному тексту», и {functionInfolabels} соответствующее значение.

Как бы вы хотели написать код?

   let functionInfolabels = ProductDetail amp;amp; ProductDetail.chart?.functionalsInfo?.[0].materialsInfo?.[0].ingredientsInfo?.map(array =gt; array.ingredientDisplayText);  let NumberStatus = ProductDetail amp;amp; ProductDetail.chart?.functionalsInfo?.[0].materialsInfo?.[0].ingredientsInfo?.map(array =gt; array.chartStatus)     return (  {ProductDetail amp;amp; ProductDetail.chart?.functionalsInfo?.length ?   ProductDetail.chart?.functionalsInfo.map(Info =gt; (  lt;li key={Info.id}gt;{Info.seedShapeDisplayText}lt;/ligt;  )) : lt;ligt;There is notlt;/ligt;}  // seedShapeDisplayText; // one two three four five ...   // lt;li key===1 onClick lt;divgt; Hi Number Minsu, Bar : 1 lt;/divgt; // lt;li key===2 onClick lt;divgt; Hi Number Jenny, Bar : 3 lt;/divgt; .... lt;divgt; Hi Number {NumberStatus} // one : Minsu, two : Jenny, three : Youngmin, four : Jiho ...  lt;Bar  labels={functionInfolabels} // one : 1, two: 3, three: 124 ....  /gt; lt;/divgt;   )  

Наиболее идиоматичный способ — установить значение состояния при lt;ligt; нажатии на элемент, а затем отобразить это значение состояния.

Используя функциональный компонент, вы можете использовать useState крючок прямым способом.

Пожалуйста, обратите внимание: я позволил себе некоторую вольность с вашим примером кода и добавил тег кнопки и вспомогательную функцию для установки значения.

 const MyComponent = () =gt; {  const [infoText, setInfoText] = React.useState('');   const onButtonClick = (text) =gt; {  setInfoText(text);  }   return (  {ProductDetail amp;amp; ProductDetail.chart?.functionalsInfo?.length ?   ProductDetail.chart?.functionalsInfo.map(Info =gt; (  lt;li key={Info.id}gt;lt;button onClick={e=gt;onButtonClick(Info.seedShapeDisplayText)}gt;{Info.seedShapeDisplayText}lt;/buttongt;lt;/ligt;  )) : lt;ligt;There is notlt;/ligt;}   // seedShapeDisplayText; // one two three four five ...    lt;divgt;  Hi Number {infoText} // one : Minsu, two : Jenny, three : Youngmin, four : Jiho ...  lt;/divgt;    ) }  

Если бы вы могли немного подробнее объяснить свой вопрос, я думаю, что его будет легко понять и ответить.

Вот решение, как я получил ваш вопрос,

здесь я использую состояние, когда numberStatus и когда вы нажимаете на любое из li них, я устанавливаю numberStatus состояние с данными numberStatus выбранного li.

также в нижней части рендеринга я проверяю, имеет ли состояние numberStatus значение, и только если я заставлю его отображаться.

 function MyComponent() {  const [numberStatus, setNumberStatus] = React.useState("");   const dataList = [  { title: "Title 01", numberStatus: "one" },  { title: "Title 02", numberStatus: "two" },  { title: "Title 03", numberStatus: "three" },  ];   return (  lt;divgt;  lt;ulgt;  {dataList.map((val, key) =gt; {  return (  lt;li key={key} onClick={() =gt; setNumberStatus(val.numberStatus)}gt;  {" "}  {val.title}{" "}  lt;/ligt;  );  })}  lt;/ulgt;   {numberStatus amp;amp; lt;divgt;Hi Number {numberStatus}lt;/divgt;}  lt;/divgt;  ); }