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

【问题标题】：how to iterate information in the state in React如何在 React 中迭代状态中的信息
【发布时间】：2022-06-22 00:22:45
【问题描述】：

最好的问候。这是我的第一个问题。我是新来的反应，我不知道如何解决这个疑问。

我提出请求，我将答案保存在状态中。现在我无法反序列化 json 并在应用程序中使用它。我尝试了几种在线推荐的方法，但没有。如果我做一个json.stringify，可以看到信息，即请求正确。

这是我从 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;

如果有任何前进的线索，我将不胜感激

【问题讨论】：

您很可能需要myData: JSON.parse(res.data)（if res.data 是 JSON 字符串）。但是，您不能 .map() 覆盖不是数组的东西。如果一切正常，this.state.myData.boards 应该是一个数组，但您还需要在初始状态下使用 myData: { boards: [] }，否则您的渲染代码将会出错

标签： javascript reactjs loops jsx monday.com

【解决方案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 语法。

因为你是新人，所以还有一些（有意见的）提示：

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

【讨论】：