如何迭代和显示内部列表中的每个元素 - reactjs

Question

如何迭代和显示 'grandChildren' 列表中的每个元素 -> 例如：["AQ11", "AS12"]。谢谢。

响应数据：

[{Key:"A",Value:["AQ11", "AS12"]}, {Key:"C",Value:["CN22", "CL33", "CV44"]}].

已将 KeyValuePair 的键设置为 'children'，将值设置为 'grandChildren' 状态。

我可以显示 children 但不能显示 grandChildren，因为它 returns 值列表 [“AQ11”、“AS12”]。在下面尝试但未能成功

render() {
        const child= Object.values(this.state.items);
        const grandChild= Object.values(this.state.items[i].grandChildren); // Not sure how to set -  how do I pass value of i. 

        return (
            <div>

                    {child.map((element, index) => {
                    <div key={index + element.children}>
                    return (                                                                                     
                         <Autocomplete                           
                            value={element.children}        // this displays children like "A" OR "C"                                                
                         />
                 
                            {grandChild.map((element1, index) => (                                                                       
                                <Autocomplete                                                      
                                value={element.grandChildren[element1]}  // NOT SURE HOW TO GET THIS TO WORK                                                
                                />                        
                            ))}
                    </div>
                    ))} 

                    );
           </div>

如何迭代和显示 grandchildren

的值

Answer 1

你可以这样做

render(){
  const child = Object.values(this.state.items);

  return (
    <div>
      {child.map((element, index) => {
        const grandChild = Object.values(this.state.items[index].grandChildren);

        return (
          <div key={index}>
            <Autocomplete
              value={element.children} // this displays children like "A" OR "C"
            />

            {grandChild.map((element1, index) => (
              <Autocomplete
                value={element1} 
              />
            ))}
          </div>
        );
      })}
    </div>
  );
};