javascript - 如何在ReactJs中使用map渲染字符串数组？

Question

我基本上想将数组中的每个字符串放在一个单独的 div 中，我正在尝试这样做，但没有渲染任何内容

export default class Loja extends Component {
      state = {
        loja: {},
        lojaInfo: {},
        category: []
      }

      async componentDidMount() {
        const { id } = this.props.match.params;

        const response = await api.get(`/stores/${id}`);

        const { category, ...lojaInfo } = response.data

        this.setState({ loja: category, lojaInfo });

        console.log(category)

      }

      render() {
        const { category } = this.state;


        return (

            <p>{category.map(cat => <div>{cat}</div>)}</p>

        );
      }
    }

console.log(category) 显示如下:

Answer 1

错误在于您正在更新 componentDidMount 内的 2 个属性，其中一个是 loja:category，第二个属性是 lojaInfo，但在 render() 方法中，您访问的 this.state.category 仍然是一个空字符串。

您想要做的是，在 componentDidMount 内部更新您的状态，如下所示:

this.setState({
  category,
  lojaInfo,
});