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

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是一个数组。根据您的描述，听起来它是一个稀疏数组(至少最初是这样)。设置状态时，必须复制包含更改的数组，不能直接修改它。因为它看起来很稀疏，所以我们不能用通常的方式(使用文字中的扩展表示法)来做到这一点，我们必须使用 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};
});