Question

我正在React中渲染属性列表（艺术家）。呈现时，必须为每个列表项进行单独的HTTP请求，以显示其他信息（类型）。为了解决这个问题，我预先在状态中放置了一个空数组-在渲染过程中为每个项目更新此状态：

let newState = Object.assign({}, this.state);
          newState.categoryList[item.id] = names; // names is a single string containing all genres
          this.setState(newState);

最终，在JSX中调用方法后，我试图在文本字段中显示流派（放入单个字符串中）：{this._getCategories(item)}。

/* this._getCategories is called to make an additional HTTP request for
         every item in the list. this.state.categoryList[item.id] should contain
         the required value (string). */
        {this._getCategories(item)}
        <Text style={styles.categories}>this.state.categoryList[item.id]</Text>

我在Expo.io上制作了可复制的版本，可以在这里找到：Snippet。为了使事情更容易理解，我在代码的每个部分都添加了附加注释。

修改

问题似乎是我用来更新状态的方式，这导致预期值不可见。公认的答案帮助我解决了这个问题。

Answer 1

，如果您遇到的问题是您没有看到HTTP请求完成时重新渲染内容，那是因为您在此处违反了React规则：

// Incorrect
let newState = Object.assign({}, this.state);
newState.categoryList[item.id] = names; // names is a single string containing all genres
this.setState(newState);

每当您基于现有状态设置新状态时（如您的第一个代码块中一样），您必须使用setState的回调版本及其传递给您的状态对象；您无法像上面那样做到； docs。

您说过categoryList是一个数组。从您的描述来看，这听起来像是一个 sparse 数组（至少在最初是这样）。设置状态时，必须复制包含更改的数组，不能直接对其进行修改。由于它似乎是稀疏的，因此我们无法以通常的方式（在文字中使用扩展符号）来做到这一点，因此我们必须使用Object.assign来代替：

// Correct
this.setState(({categoryList}) => ({categoryList: Object.assign([], categoryList, {[item.id]: names})}));

或可能更清晰，详细的版本：

this.setState(state => {
    const categoryList = Object.assign([], state.categoryList);
    categoryList[item.id] = names;
    return {categoryList};
});

显示每个列表项的属性新状态

1 个答案: