Question

我正在尝试将子组件中的数组（标题）传递给父组件，然后使用该组件设置父组件的状态。但是，在处理increaseReads（）方法的更改时，我无法更改articlesRead状态

您将看到两个console.log（）语句;第一个是成功记录标题，但第二个是记录一个空数组 - 前一个状态

孩子：

export class Publication extends React.Component {
  constructor() {
    super();
    this.state = {
      titles: [],
      links: []
    };
  }

  componentDidMount() {
    fetch(this.props.api)
    .then(response => {
      return response.json();
    }).then(data => {
      let items = data.items;
      let titles = items.map(item => {
        return item.title;
      });
      let links = items.map(item => {
        return item.link;
      });
      this.setState({titles: titles, links: links});
    });
  }

  handleClick() {
    const titles = this.state.titles
    this.props.total(titles);
    //this.props.articles();
  }


  render() {
    return (
      <div className='publication'>
        <h4>{this.props.name}</h4>
        <ul>
          <li><a href={this.state.links[0]} target='_blank' onClick={() => {this.handleClick()}}>{this.state.titles[0]}</a></li>
          <li><a href={this.state.links[1]} target='_blank' onClick={() => {this.handleClick()}}>{this.state.titles[1]}</a></li>
          <li><a href={this.state.links[2]} target='_blank' onClick={() => {this.handleClick()}}>{this.state.titles[2]}</a></li>
          <li><a href={this.state.links[3]} target='_blank' onClick={() => {this.handleClick()}}>{this.state.titles[3]}</a></li>
          <li><a href={this.state.links[4]} target='_blank' onClick={() => {this.handleClick()}}>{this.state.titles[4]}</a></li>
        </ul>
      </div>
    );
  }
}

父母：

export class Latest extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      totalReads: 0,
      articlesRead: []
    };
    this.handleChange = this.handleChange.bind(this);
  }

  handleChange() {
    this.props.increaseTotal();
  }

  increaseReads(titles) {
    console.log(titles);
    this.setState({
      totalReads: this.state.totalReads + 1,
      articlesRead: titles
    })
    console.log(this.state.articlesRead);
    this.handleChange();
  }

  render() {
    return (
      <div className='container'>
        <Publication total={(titles) => {this.increaseReads(titles)}} name='Free Code Camp' api={'https://api.rss2json.com/v1/api.json?rss_url=https%3A%2F%2Fmedium.freecodecamp.org%2Ffeed%2F'}/>
        <Publication total={() => {this.increaseReads()}} name='Code Burst' api={'https://api.rss2json.com/v1/api.json?rss_url=https%3A%2F%2Fcodeburst.io%2Ffeed%2F'}/>
        <Publication total={() => {this.increaseReads()}} name='JavaScript Scene' api={'https://api.rss2json.com/v1/api.json?rss_url=https%3A%2F%2Fmedium.com%2Ffeed%2Fjavascript-scene%2F'}/>
        <Publication total={() => {this.increaseReads()}} name='Hacker Noon' api={'https://api.rss2json.com/v1/api.json?rss_url=https%3A%2F%2Fhackernoon.com%2Ffeed'}/>
      </div>
    )
  }
}

我确信它很小，但任何帮助都会非常感激！

Answer 1

问题可能是您期望this.setState同步。请参阅documentation here。

看看这个CodeSandbox demo。 this.setState接受回调作为第二个参数。在this.setState完成后调用此回调。

请注意，在console.log输出中，我们可以看到old和new州的值。

如何使用传递给React中的函数的参数设置State

1 个答案: