Reactjs 基于作为数组中元素的对象的键的值的目标对象

如何根据作为数组中元素的对象的键的值来确定对象的目标

减速器：

在我渲染的组件中：

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 );

如何确定要更新的对象编号

注意：我试过了，但发现很难将API调用的数据附加到对象。使用阵列更容易

请协助。

假设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
  }
}

---

我不确定我是否理解正确。您可以在TouchableOpacity上获取项目id，对吗？现在要更新“单击的项目编号”属性吗？如果是这样，这是一个JavaScript问题，您可以尝试使用Object.values，它将返回一个包含所有对象属性的数组。然后可以使用.find或.filter返回与按下的id对应的单个项。现在可以更新属性设置，如post.number=123。希望对汉克斯有帮助。我理解这里的逻辑。尝试了此操作，但出现错误：state.findIndex不是函数return[…state.slice0，index，updatedata，…state.sliceindex+1]；这似乎不起作用。状态未更新。返回{posts:[…state.posts.slice0，index，updatedata，…state.posts.sliceindex+1]}；成功了。谢谢你的伪代码和你的时间。干杯

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 );

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
  }
}