基于该对象的键值的目标对象，该对象是数组中的一个元素答案

【问题标题】：Target object based on a value of a key of that object which is an element in an array基于该对象的键值的目标对象，该对象是数组中的一个元素
【发布时间】：2017-09-29 20:42:56
【问题描述】：

如何根据作为数组元素的对象的键值来定位对象。

减速机：

const initialState = {
    posts: []
}


export default function newData (state = initialState, action) {
  switch (action.type) {
    case "updateNumber":
      return {
        ...state,

        /* How to determine which object's number I should update? */
        /* The payload is the id */
        number: this.state.number ++ // <== need help here.
      }
    default:
      return state
  }
}

从 API 调用返回的数据将附加到帖子中：

帖子：

[
  {
    id: '1',
    name: 'Name One',
    number: 11
  },
  {
    id: '2',
    name: 'Name Two',
    number: 22
  },
  {
    id: '3',
    name: 'Name Three',
    number: 33
  }

]

在我正在渲染的组件中：

class Posts extends Component {

    renData () {
      console.log("ThePosts: ", this.props.posts);
      return posts.map((post, postIndex) => {
        return (
            <View key = {postIndex}>
                <TouchableOpacity
                    onPress={() => updateNumber(post.id)} 
                >
                    <Text> {post.number} </Text>
                </TouchableOpacity> 
            </View>
        )
      });
    }

    render(){
      return(
        <View style={style.container}>
            {this.renData}
        </View>
      )
    }

}

function mapDispatchToProps(dispatch) {
  return {
    updateNumber: (id) => {
      dispatch(updateNumber(id))
    }
  }
}

function mapStateToProps(state) {
  return {
      posts: state.posts,
  }
}

export default connect( mapStateToProps, mapDispatchToProps ) ( Posts );

如何确定要更新哪个对象的number？

注意：我尝试了this approach，但我发现将 API 调用的数据附加到对象非常困难。使用数组更容易。

请帮忙。

【问题讨论】：

我不确定我是否理解正确。您可以处理在您的TouchableOpacity 上获取项目 ID，对吗？现在您要更新单击的项目number 属性吗？如果是这样，这是 JavaScript 问题，您可以尝试使用 Object.values (developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…)，它将返回一个包含所有对象属性的数组。然后可以使用.find() 或.filter() 来返回对应按下的id 的单项。您现在可以更新属性设置，例如 post.number = 123。希望对你有帮助

标签： reactjs react-native redux react-redux

【解决方案1】：

假设updateNumber实际上只是增加数字，你必须首先使用id在reducer中找到你想要更新的数组中的对象的索引。然后，您可以创建一个新数组，用递增的对象替换该对象：

export default function newData (state = initialState, action) {
  switch (action.type) {
    case "updateNumber": {
      const { posts } = state;
      // find object to update
      const index = posts.findIndex(({ id }) => id === action.id);

      if (index > -1 ) {
        // create new object with existing data and increment number
        const updatedData = {...posts[index]};
        updatedData.number++;

        // return new posts array that replaces old object with incremented object at index
        return { posts: [...posts.slice(0, index), updatedData, ...posts.slice(index + 1)]};
      }

      // return state if no object is found
      return state;
    }
    default:
      return state
  }
}

【讨论】：

谢谢。我理解这里的逻辑。试过这个但得到错误：state.findIndex is not a function
return [...state.slice(0, index), updatedData, ...state.slice(index + 1)]; 这似乎不起作用。状态未更新。
return { posts: [...state.posts.slice(0, index), updatedData, ...state.posts.slice(index + 1)]}; 成功了。感谢您的伪代码和您的时间。干杯！