Reactjs 从json文件一次显示1个值

我对react没有太多经验，而且我无法从json文件中只获取一个值并显示它。 更具体地说，我有这个json

[
  {
    "id": 1,
    "digit": "12345"
  },
  {
    "id": 2,
    "digit": "43215"
  },
  {
    "id": 3,
    "digit": "34565"
  }
]

我想要的是为卡片显示一个值，当我刷新页面时，用下一个值更新该值，以此类推

class randomCard extends React.Component<{}, State> {
  constructor() {
    super();
    this.state = {
      card: [],
    };
  }

  componentDidMount() {
    fetch('.card-code.json', {
      headers: {
        'Content-Type': 'application/json',
        Accept: 'application/json',
      },
    })
      .then(response => response.json())
      .then(data => {
        this.setState({
          card: data,
        });
      });
  }

  render() {
    return (
      <div className="card-wrapper">
        <div>
          {this.state.card.map(codes => (
            <span className="card-item">{codes.digit}</span>
          ))}
        </div>
      </div>
    );
  }
}

class-randomCard扩展React.Component{
构造函数（）{
超级（）；
此.state={
卡片：[]，
};
}
componentDidMount（）{
获取（'.card code.json'{
标题：{
“内容类型”：“应用程序/json”，
接受：'application/json'，
},
})
.then（response=>response.json（））
。然后（数据=>{
这是我的国家({
卡片：数据，
});
});
}
render（）{
返回(
{this.state.card.map（代码=>(
{code.digit}
))}
);
}
}

现在我得到123454321534565

有什么办法吗

---

提前谢谢

在状态中添加计数器，每次刷新时显示下一个卡片项目，直到获得计数器==卡片长度。

在状态中添加计数器，每次刷新时显示下一个卡片项目，直到获得计数器==卡片长度。

尝试此操作

render() {
    return (
      <div className="card-wrapper">
        <div>
          {this.state.card.map((codes,index) => (
            <span className="card-item" key={index}>{codes.digit}</span>
          ))}
        </div>
      </div>
    );
  }

render（）{
返回(
{this.state.card.map（（代码，索引）=>(
{code.digit}
))}
);
}

试试这个

render() {
    return (
      <div className="card-wrapper">
        <div>
          {this.state.card.map((codes,index) => (
            <span className="card-item" key={index}>{codes.digit}</span>
          ))}
        </div>
      </div>
    );
  }

render（）{
返回(
{this.state.card.map（（代码，索引）=>(
{code.digit}
))}
);
}

当您刷新页面时，整个页面都会被刷新，因此您将再次刷新默认值，您想要什么？如果您只想显示一个值，那么您可以简单地执行{this.state.card[0].digit}不要将

card.digit

放在

codes.digit

中，因为您正在从您的状态映射变量卡。刷新页面时，整个页面都会刷新，因此您将再次使用默认值，这是您想要的吗？如果你只想显示一个值，那么你可以简单地{this.state.card[0].digit}不要把

card.digit

放在上面，它应该是

codes.digit

，因为你是从你的状态映射变量卡。OP的要求是完全不同的，他只是打字错误，否则他得到的是正确的值。OP的要求是完全不同的，他只是输入了一个错误，否则他会得到正确的值。