Question

要获得所需的行为，我最终在Context.Consumer内嵌套了三元，并且看起来很丑陋。我已经尝试过重构某些逻辑，但是除非我使用Context.Consumer，否则我无法在道具/状态更改时触发重新渲染。

为项目开发应用程序。它使用SWAPI搜索“星球大战”宇宙中的几乎所有东西。我根据用户的输入进行更改，然后加载其搜索结果。

我刚开始尝试在获取完成后渲染结果，但是在处理组件的props / state更新时有一些问题而不触发重新渲染。我们最近了解了React的Context API，所以我决定尝试在这个简单的项目中使用它，即使100％不必要。我做了一些阅读，最后得到了Context.Consumer。它可以很好地满足我的需求，并在需要时触发重新渲染。

  render() {
    return (
      <AppContext.Consumer>
// value here is: characterData: this.state.characterData from App.js
// characterData is in App.js' state and is updated after the fetch is successful.
        {value => (
          <section className="results-container" style={this.styles}>
            {/* FIX refactor this \/ */}
{/* 
If they haven't searched for anything, characterData doesn't exist yet,
well it's an empty {object} so it renders the 'Enter a name and hit submit!'
If they search and the results are empty, it tells them to try another name.
If the search works it renders the results.
*/}
            {value.characterData.results ? (
              value.characterData.results.length > 0 ? (
                value.characterData.results.map(item => (
                  <p style={this.styles} key={item.url} className={item.index}>
                    {item.name ? item.name : item.title}
                  </p>
                ))
              ) : (
                <span>Coulnd't find anything! Try another name or topic.</span>
              )
            ) : (
              <span className="default-results-text">
                Enter a name and hit submit!
              </span>
            )}
            {/* FIX refactor this /\ */}
          </section>
        )}
      </AppContext.Consumer>
    );
  }

我没有收到任何错误，只是试图找出一种方法来清理此错误。当试图将逻辑移到Context.Consumer之外时，我不得不退回到使用状态/道具，然后再也不要放弃。我已经尝试过使用componentWillReceiveProps（）和静态的getDerivedStateFromProps（），但是再次无法触发渲染。

托管在Zeit上：https://starwars-search-nm7mk0268.now.sh/

Answer 1

我最终将所有逻辑重构为父组件，然后仅返回所有逻辑的值。这使我摆脱了嵌套的三元并清理了该组件的render方法

Context.Consumer

1 个答案: