如何在React中迭代状态中的信息

Question

敬上。这是我第一个问题。我的反应是新的，我不知道如何处理这种怀疑。

我提出请求并将答案保存在状态中。现在我无法反序列化json并在应用程序中使用它。我尝试了几种在线推荐的方法，但一无所获。如果我创建一个json。字符串化后，我可以看到信息，即请求是正确的。

这是我从api收到的请求:

{"boards":[{"items":[{"id":"John Smith","column_values":[{"text":"Caracas, Distrito Capital, Venezuela"}]},{"id":"Edith Ruza","column_values":[{"text":"Buenos Aires, CABA, Argentina"}]},{"id":"david Rios","column_values":[{"text":"Perth Australia Occidental, Australia"}]},{"id":"Peter Doe","column_values":[{"text":"Calgary, Alberta, Canadá"}]},{"id":"Mary Jones","column_values":[{"text":"London, Reino Unido"}]},{"id":"Lionel Messi","column_values":[{"text":"París, Francia"}]},{"id":"Samy Forte","column_values":[{"text":"Mexico City, CDMX, México"}]},{"id":"Tadeo Carthy","column_values":[{"text":"Tel Aviv, Israel"}]}]}]}

，这是我的代码不能工作:

class App extends React.Component {
constructor(props) {
super(props);
// Default state
this.state = {
setData:{},
settings: {},
myData: {},      
};
}
com
componentDidMount() {

monday
.api('query { boards( ids : 2664704591 ) { items { id : name column_values(ids : "ubicaci_n") { text }}}}')
.then(res => {this.setState({myData: res.data})});
}

render() {    
return (

<div className="App">
<AttentionBox
title="hola"
text="Let's start building your amazing app, which will change the world!"          
/>
<div className="btn btn-primary"></div>
<button className="btn btn-warning"></button>
<div>
{this.state.myData.map((property) => {
return (<div>property</div>)
})}
</div>        
</div>
);
}
}
export default App;

我将非常感谢任何进一步的线索

Answer 1

正如@ChrisG提到的，你首先需要通过使用JSON.parse(res.data)解析json字符串(提供它是一个有效的json字符串-它似乎是)成一个js对象，然后你有2级嵌套在你的数据结构上，你必须映射:

{ this.state.myData?.boards && // however you want to guard this part
<div>
{this.state.myData.boards.map(board =>
<div>{board.items.map(item => <div>{item}</div>)}</div>
}
</div>
}

另一个注意事项是，因为myData可能是{}或{ boards: [] }，您应该对myData是否已返回有某种形式的保护。这可以是一个if语句，或者它可以使用javascript的伪逻辑与check && result语法，就像我上面使用的。

因为你是新人，再给你一些(固执己见的)建议:

• 尝试切换到功能组件，而不是您在这里使用的基于类的组件
• 你可能想要指定一些较低级别的组件来处理这些映射，这样你的代码就不会变得非常混乱