Question

在状态下，我有一个数组，并且想访问数组位置之一。例如，在其他语言中，可能是：

usersJson [position] ...

但是在反应中我做不到：

this.state.usersJson [position] = ...

有人可以帮忙吗？

constructor() {
    super();
    this.state = {
      usersJson: []
    };


//loads a list of users througth jsonPlaceholder data

fetch("https://jsonplaceholder.typicode.com/users")
      .then(response => response.json())
      .then(json => this.setState({ usersJson: json }));

我已经尝试过了：

{this.state.usersJson.map((item => {
      if (item.id === props.id) {
        return(
          item.email = props.email,
          item.address = {
            street: props.address.street,
            suite: props.address.suite,
            city: props.address.city,
            zipcode: props.address.zipcode,
          },
  item.phone = props.phone
)
}
     return null
    }))}

但是我想要类似

this.setState（{userJson [position]：...}）

数组如下：

usersJson:{
    id: ...,
    name: "...",
    email: "..",
    address: {
      street: "...",
      suite: "...",
      city: "...",
      zipcode: "..."
    },
    phone: "..."
  }

Answer 1

您可以将阵列复制到临时阵列，然后更改该阵列。就像

adjustArray = () => {
const {usersJson} = this.state;
let tempArray = [...usersJson];
tempArray[position] = "something";
this.setState = ({ usersJson: tempArray});
}

Answer 2

在React类中，您只能使用this.setState进行更新。

如果您不知道user在数组的哪个位置，则可以对数组使用.find方法。但是，由于您尝试访问JSON，因此建议您将从API接收的数组转换为对象。然后，您将能够使用this.state.usersJson[key]访问该位置，其中key是您决定在usersJson中命名每个对象的位置。

Answer 3

要基于属性名称更新状态，请执行以下操作：

state = {
    name : 'John',
    surname : 'Doe'
}

handleChange = (name, value) => this.setState(state =>({
    ...state,
    [name] : value
}))

render() {
    const { name } = this.state
    return <input value={name} onChange={e => this.handleChange('name', e.target.value))}
}

React-如何访问数组中的特定位置，然后进行更改？

3 个答案: