Question

父组件Dashboard保存着我添加到ListItem的每个Watchlist的状态。不幸的是，每次我添加一个Item时，它都会被添加到数据库中，但是只有在刷新浏览器时才会显示。

class UserDashboard extends React.Component {
  state = {
    data: []
  }

  componentWillMount() {
    authService.checkAuthentication(this.props);
  }

  isLoggedIn = () => {
    return authService.authenticated()
  }

  getAllCoins = () => {
    //fetches from backend API
  }

  addWishlist = () => {
    this.getAllCoins()
      .then(things => {
        this.setState({
          data: things
        })
      })
    console.log("CHILD WAS CLICKED")
  }

  componentDidMount() {
    this.getAllCoins()
      .then(things => {
        this.setState({
          data: things
        })
      })
  }

  render() {
    return (
      <div className="dashboard">
        <h1>HI, WELCOME TO USER DASHBOARD</h1>
        <SearchBar
          addWishlist={this.addWishlist}
        />
        <UserWatchlist
          data={this.state.data}
        />
      </div>
    );
  }
}

用户关注列表：

class UserWatchlist extends React.Component {
  constructor(props) {
    super(props)
  }

  // componentDidUpdate(prevProps) {
  //   if (this.props.data !== prevProps.data) {
  //     console.log("CURRENT", this.props.data)
  //     console.log("PREVs", prevProps.data)
  //   }
  // }

  render() {
    return (
      <div>
        <h2>These are tssssyou are watching:</h2>
        <ul className="coin-watchlist">
          {
            this.props.data.map((coin, idx) => {
              return <ListItem key={idx}
                              coin={coin.ticker}
                              price={coin.price}
                      />
            })
          }
        </ul>
      </div>
    )
  }
}

显示可能需要监视的物品的搜索栏：

class SearchBar extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      coins: [],
      searchValue: ""
    }
  }


  searchHandler = e => {
    e.preventDefault()
    const value = e.target.value

    this.setState({
      searchValue: value
    });

    if (value === "") {
      this.setState({
        coins: []
      })
    } else {
      this.getInfo()
    }
  }

  getInfo = () => {
    // Searches the API
  }

  addWishlist = () => {
    this.props.addWishlist();
  }

  render() {
    const {coins, searchValue} = this.state

    return (
      <div className="coin-search">
        <form>
          <input
            type="text"
            className="prompt"
            placeholder="Search by ticker symbol"
            value={searchValue}
            onChange={this.searchHandler}
          />
        </form>
        <ul className="search-suggestions">
          {
            coins.filter(searchingFor(searchValue)).map( coin =>
              <Currency
                coin={coin}
                addWishlist={this.addWishlist}
              />
            )
          }
        </ul>
      </div>
    );
  }
}

以及要添加的实际货币：

class Currency extends React.Component {

  addToWatchlist = () => {
    // POST to backend DB to save
    };

    fetch("/api/add-coin", settings)
      .catch(err => {
        return err
      })
  }

  clickHandler = () => {
    this.addToWatchlist()
    this.props.addWishlist()
  }

  render() {
    return(
      <div className="search-results">
          <li>
            <h3> { this.props.coin.currency } </h3>
            <button
              className="add-to-list"
              onClick={this.clickHandler}
              >
                + to Watchlist
              </button>
          </li>
      </div>
    )
  }
}

如您所见，我一直在向孩子们发送道具。当我单击“添加到监视列表”按钮时，我看到console.log消息出现，提示“孩子被选中”。我什至尝试过仅调用该方法再次从后端API获取。

此外，在UserWatchlist中，我尝试了componentDidUpdate，但是prevProps和this.props都显示相同的数据数组。在链的某个地方，我的数据丢失了。

这也是我第一次在这里发布问题，因此，如果可以改进，我很乐意添加更多详细信息并为该社区做出贡献

Answer 1

您可能忘记了等待addToWatchlist完成：

  addToWatchlist = () => {
    // POST to backend DB to save
    return fetch("/api/add-coin", settings)
      .catch(err => {
        return err
      })
  }

  clickHandler = () => {
    this.addToWatchlist().then(() => {
      this.props.addWishlist()
    })
  }

当父组件中的状态已更新时，自动呈现子组件

1 个答案: