Question

我有一个函数getBar()返回一个像这样的对象：

{
  foo: 'value',
  array: ['a', 'b', 'c']
}

这是我的React组件调用上述函数，即getBar()：

class foo extends Component {

  state = {
    bar: {}
  };    
  componentDidMount(){
    this.setState({
      bar : getBar()
    });
  }
  render() {
    {this.state.bar.array.map((value, i) => <div class="row" key={i}>{value}</div>)}
  }
}

它总是给我Uncaught TypeError: Cannot read property 'map' of undefined错误。 Exploring similar questions，我知道我必须声明一个空的状态数组，我以不同的方式做了但没有工作。任何人都可以给我一个合适的答案，最好有完整的逻辑。

我尝试了另一种方式将状态数组声明为const中的render()但未获得成功结果。

Answer 1

好的，这实际上与您的component's lifecycle

有关

问题是您的var subUsers = new List<Sub_User>() { new Sub_User { Name= "Unicorn" } }; subUsers.ForEach(su => context.SubUsers.Add(su)); context.SaveChanges();方法在public class SampleContext : DbContext { public SampleContext() : base("SampleContext") {} public DbSet<User> Users { get; set; } public DbSet<Sub_User> SubUsers { get; set; } }方法之前运行。因此，组件第一次呈现状态时如下所示：

render

因此bar上没有数组属性，这意味着你无法映射它（这就是你得到错误的原因）。相反，您可以使用componentDidMount方法在渲染方法运行之前设置状态，或者您可以在映射之前检查正在设置的数组。

使用React中的数组键迭代遍历状态对象的循环

1 个答案: