Question

有一个对象response = client.start_transcription_job( TranscriptionJobName='string', LanguageCode='en-US', MediaSampleRateHertz=123, MediaFormat='mp4', Media={ 'MediaFileUri': 'string' }, OutputBucketName='string')，其对象为product作为其字段。从服务器获取manufacturer后，我用新数据重新分配了产品字段manufacturers（例如，获取的制造商将附加对象manufacturer作为其字段）。

avatar

然后我想在React render（）中显示头像。

async componentDidMount() {
  strapi.setToken(this.state.user.jwt);
  const products = await strapi.getEntries('products');
  products.forEach(async product => {
    const manufacturer = await strapi.getEntry('manufacturers', product.manufacturer.id); //fetched manufacturers has additional field "avatar"
    Object.assign(product.manufacturer, manufacturer);
  });

  console.log(products); // product.manufacturer.avatar is not null

  this.setState({
    products
  });

另外，当我使用React Developer Tools检查状态时，产品的字段render() { if (!this.state.products) return null; return( {this.state.products ? this.state.products.map(product => ( // and it says that avatar is null <img src={product.manufacturer.avatar.url} /> // displays manufacturer with avatar object {console.log(product.manufacturer)} // says null! {console.log(product.manufacturer.avatar)} ))} ) }具有对象manufacturer，并且它不是null。

更新：感谢谢尔盖·苏斯洛夫（Sergey Suslov）

avatar

Answer 1

您正在使用不改变源对象的assign方法进行分配，结果将返回新对象，请选中此https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign。您需要做这样的事情：产品= { ...产品，制造商：您的分配声明 } 主要原因是您在foreach中的回调函数是异步的，js不会等待所有foreach函数调用完成，它会继续运行，使用异步字，尝试为此使用Promise，或者更好地尝试对异步请求使用操作，谢谢图书馆或萨加斯。

Answer 2

这是因为在第一次渲染时，您没有avatar值。这些值是在第一个渲染（componentDidMount）之后获取的。

您需要添加测试以将第一个渲染考虑在内。

此外，您的console.log不一致的原因是，您覆盖了产品的价值，为了使其更加不变，您应该.map而不是forEach并返回产品的副本修改现有的。

我怎么写：

constructor(props){
    super(props);

    this.state = {
        products: []
    }
}

render() {
    return this.state.products.map(product => {
        const {
            avatar = {}
        } = product.manufacturer;
        return (
            <img src={avatar.url} />
        );
    });
}

JavaScript中的对象分配

2 个答案: