Question

我的父组件状态数据如下：

data=[
            {key:0,name="abc",value="123"},
            {key:1,name="def",value="456"},
            {key:2,name="ghi",value="789"}
     ]

在我的react组件中，我将子组件作为父组件的返回部分中的列表调用，如下所示。

class MyApp extends React.Component{
  constructor(props) {
    super(props);
     this.state = {
      record={
        name="",
        timestamp="",
        data =[
          {key:0,name="abc",value="123"},
          {key:1,name="def",value="456"},
          {key:2,name="ghi",value="789"}
        ]
    }
    this.deleteFromStateArray=this.deleteFromStateArray.bind(this);
  }

  deleteFromStateArray(key){
    let oldData = [...this.state.record.data];
    let newData= [];
    oldData.map(function (record, i) {
      if (record.key != key) {
        newData.push(record);
      }
    })
    newData.map(function (record, i) {
      newData[i].key = i + 1
    })
    this.setState({ record: Object.assign({}, this.state.record, { data: newData }), });
  }
  render() {

  return(
    {
      this.state.data.map((record,index) => 
             <Child key={record.key}
              id={record.key}
              name={record.name}
              value={record.value}
              onDelete={this.deleteFromStateArray} />
    }
  )
  }

我在这样的子组件中调用了delete（） <button onClick={this.props.onDelete(this.state.id)} /> \\ I am initializing id as key in state inside constructor in child

我的问题是当我在子类中调用onDele时，我能够在函数中正确地删除带有key = 1的obj，但是重新渲染没有正确发生。

我的意思是状态正确设置正确，数据1中只有2项，键= 0，其他键= 2。但我在GUI中看到的是2个子组件1，键0，第二个键，键= 1，状态数据中通常不存在。

有人可以帮我正确地重新渲染数据吗？

我还想在setState
中删除数组后更改密钥顺序

Answer 1

React使用import java.util.Arrays; import org.springframework.security.oauth2.client.token.AccessTokenRequest; import org.springframework.security.oauth2.client.token.DefaultAccessTokenRequest; import org.springframework.security.oauth2.client.token.grant.code.AuthorizationCodeAccessTokenProvider; import org.springframework.security.oauth2.client.token.grant.code.AuthorizationCodeResourceDetails; public class OAuth2Client1 { public static void main(String[] args) { AuthorizationCodeResourceDetails resource = new AuthorizationCodeResourceDetails(); resource.setId("My Developer"); resource.setClientId("xxxxxx"); resource.setClientSecret("xxxxxx"); resource.setAccessTokenUri("https://api.infusionsoft.com/token"); resource.setUserAuthorizationUri("https://signin.infusionsoft.com/app/oauth/authorize"); resource.setPreEstablishedRedirectUri("https://myapps.com:8181/my_work"); resource.setScope(Arrays.asList("full")); try { AuthorizationCodeAccessTokenProvider authProvider = new AuthorizationCodeAccessTokenProvider(); AccessTokenRequest request = new DefaultAccessTokenRequest(); String str = authProvider.obtainAuthorizationCode(resource, request); System.out.println(str); } catch (Exception e) { e.printStackTrace(); } } }来计算集合中的元素是否需要重新渲染。键应唯一和常量。在您的方法中，您正在更改记录的key属性，这可能会导致描述错误。

此外，您可以使用简单的key调用替换所有代码：

filter

值得一提的是，您应该尽可能保持this.setState(oldState => ({ record: { ...oldState.record, { data: oldState.record.data.filter(item => item.key !== key) } } });平坦，以简化所需的逻辑。在您的情况下，删除state并将其保留为以下将是一个好主意：

record

Answer 2

我不确定这是否真的对您有用，但deleteFromStateArray的函数声明位于render函数内。

我认为您的组件应如下所示：

class MyApp extends React.Component{
  constructor(props) {
    super(props);

    this.state = {
      record={
        name="",
        timestamp="",
        data =[
          {key:0,name="abc",value="123"},
          {key:1,name="def",value="456"},
          {key:2,name="ghi",value="789"}
        ]
    }
    this.deleteFromStateArray=this.deleteFromStateArray.bind(this);
  }

  deleteFromStateArray(key){
    let oldData = [...this.state.record.data];
    let newData= [];
    oldData.map(function (record, i) {
      if (record.key != key) {
        newData.push(record);
      }
    })
    newData.map(function (record, i) {
      newData[i].key = i + 1
    })
    this.setState({ record: Object.assign({}, this.state.record, { data: newData }), });
  }
  render() {
    return(
      {
        this.state.record.data.map((record,index) => 
          <Child key={record.key}
            id={record.key}
            onDelete={this.deleteFromStateArray} />
      }
    )
  }
}

编辑数组后，在React中重新渲染子组件数组

2 个答案: