Question

我有3个组成部分： Search.js，Customers.js和Customer.js

在Search.js中，我有一个输入字段。我想将在字段中输入的任何值发送到Customer.js组件。我以为这很简单，但是我错了...

我还有一个context.js组件，用于存储应用程序的状态（我不希望使用redux，因为我还不知道）。

抱歉，这是一篇很长的文章，因为我想为这种情况提供背景信息：

context.js

const Context = React.createContext();
const reducer = (state, action) => {
  switch (action.type) {
    case "SEARCH_CUSTOMERS":
      return {
        ...state,
        customer_list: action.payload,
        firstName: ''

      };
    default:
      return state;
  }
};
export class Provider extends Component {
  state = {
    customer_list: [],
    firstName: "",
    dispatch: action => this.setState(state => reducer(state, action))
  };
  componentDidMount() {
    axios
      .get("/api")
      .then(res => {
        console.log(res.data);
        this.setState({ customer_list: res.data });
      })
      .catch(error => console.log(error));
  }
  render() {
    return (
      <Context.Provider value={this.state}>
        {this.props.children}
      </Context.Provider>
    );
  }
}

export const Consumer = Context.Consumer;

Search.js：我要发送给客户的输入值为“ firstName”

class Search extends Component {
  state = {
    firstName: ""

  };

  onChange = e => {
    this.setState({ [e.target.name]: e.target.value });
  };

  findCustomer = (dispatch, e) => {
    e.preventDefault();
    axios
      .get("/api/customers", {
        params: {
          firstName: this.state.firstName,
        }
      })
      .then(res => {
        dispatch({
          type: "SEARCH_CUSTOMERS",
          payload: res.data
        });
        this.setState({ firstName: "" });
      });
  };

return (
      <Consumer>
        {value => {
          const { dispatch } = value;
          return (
              <form onSubmit={this.findCustomer.bind(this, dispatch)}>
                <div className="form-group">
                  <input
                    ref={input => {
                      this.nameInput = input;
                    }}
                    type="text"
                     name="firstName"
                    value={this.state.firstName}
                    onChange={this.onChange}
                  />

Customers.js：

class Customers extends Component {
  render() {
    const key = Date.now();
    return (
      <Consumer>
        {value => {
          const { customer_list} = value;
          if (customer_list === undefined || customer_list.length === 0) {
            return <Spinner />;
          } else {
            return (
              <React.Fragment>
                <h3 className="text-center mb-4">{heading}</h3>
                <div className="row">
                  {customer_list.map(item => (
                    <Customer key={item.key} customer={item} />
                  ))}
                </div>
              </React.Fragment>
            );
          }
        }}
      </Consumer>
    );
  }
}

export default Customers;

最后是Customer.js：这是我要显示输入值的地方：

    const Customer = props => {
      const { customer } = props;
    return (
        <div className="col-md-12">
            <div className="card-body">
                  <strong>{customer.firstName}</strong> // not working
   ...
}

{customer.firstName}没有显示该值。

是否有必要通过中间Customers.js组件来传递输入值？我想保持体系结构不变（使用context.js），并在Customer.js组件中显示值。

反应上下文：将输入数据发送到另一个组件

0 个答案: