Question

我在结果组件上遇到问题，我无法呈现filteredData，结果this.props.dataToRender无法正常工作，就是问题所在。

我已经有了所有逻辑，但是当尝试在另一个组件上显示搜索结果时，我没有任何信息。

如果我在app组件上执行代码，我会得到搜索结果，但是如果我尝试将其作为props传递，那么我不会在另一端得到结果。

Data.Atom

在Result组件中，我尝试移动了notifyData和const dataToRender，但是没有用。

  state = { data: [], filteredData: [], value: "" };

  async componentDidMount() {
    axios
      .get("https://tenjoucesar.github.io/data.json")
      .then(response => response.data)
      .then(data => {
        this.setState({ data });
        console.log(this.state.data);
      });
  }

  handleSubmit(e) {
    const { value, data } = this.state;
    e.preventDefault();
    let email = value;
    const filtered = data.filter(e => e.email === email); 
    this.setState({ filteredData: filtered });

  }

  handleChange(e) {
    this.setState({ value: e.target.value });
  }

InfomData = person => {
    return (
      <div className="result" key={person.email}>
        <h3 >
          {person.name}, &nbsp;{person.age}
        </h3>
        <p className="paragraph--result">{person.notes}</p>
      </div>
    );
  };

render() {
    const { filteredData } = this.state;
    const dataToRender = filteredData.map(e => this.InfomData(e));
    return (
      <React.Fragment>
        <Nav />
        <Switch>
          <>
            <Route exact path="/" component={Header} />
            <Search
              component={Search}
              handleSubmit={this.handleSubmit.bind(this)}
              handleChange={this.handleChange.bind(this)}
              value={this.props.value}
              type={this.props.email}
            />
            <Route exact path="/" component={Reverse} />
            <Route
              path="/result"
              component={Result}
              dataToRender={dataToRender}
            />
          </>
        </Switch>
        <Footer />
      </React.Fragment>
    );
  }
}

我只想在result组件上获取结果，我已经尝试过使用发现的所有内容，但没有任何效果。有人可以告诉我该怎么办吗？很抱歉，我仍在学习有关反应的信息

Answer 1

只需为此修改Route

 <Route
    path="/result"
    render={() => <Result dataToRender={dataToRender} />}
  />

由于必须将道具注入到组件中，所以这就是方法

通过Route的render带有组件和customProps的箭头功能

编辑

如果您还需要在使用history, location, search时默认传递的<Route path="/" component={Something} />道具，则应显式传递它们

<Route 
   path="/result"
   render = {(props) => <Result dataToRender={dataToRender} {...props} /> }
/>

无法在另一个组件上显示搜索的输出

1 个答案: