Question

class A extends Component {

  constructor(props) {
    super(props);
    this.state = {
      fruitsDetailsList: [],
      fruitCode: this.props.fruitCode,
    };
  }

  showModal = () => {
    this.setState({ show: true });
  };

  hideModal = () => {
    this.setState({ show: false });
  };

  componentDidMount() {
    const url = 'http://localhost:3000/getFruitslist'; 
    fetch(url, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        fruitCode: this.state.fruitCode,
      }),
    })
    .then(res => {
      if (res.ok) {
        return res.json();
      }
      throw new Error(res.status);
    })
    .then(res => {
      this.setState({
        fruitsDetailsList: res.fruitDetailsList,
      });
    })
    .catch(error => {});
  }
  render() {
    const columns = [
      {
        Header: 'Sr.No',
        id: "row",
        maxWidth: 50,
        Cell: (row) => {
          return <div>{row.index + 1}</div>
        }
      },
      {
        Header: 'Actions',
        id: 'FruitName',
        accessor: d => (
          <div>
            <B/>
          </div>
        )
      }
    ];

    return (
      <div>
        <ReactTable
          className="-striped -highlight"
          columns={columns}
          data={this.state.fruitsDetailsList}
          defaultPageSize={10}
          noDataText={'No Data available.'}
        />
        <p></p>
      </div>
    );
  }

  Class B extends component{
    constructor(props) {
      super(props);
      this.state = { modal: false };
      this.toggle = this.toggle.bind(this);
    }

    toggle() {
      this.setState({
        modal: !this.state.modal
      });
    }

    render() {
      return (
        <div>
          <Button onClick={this.toggle}/>
          <Modal isOpen={this.state.modal}>
            <ModalHeader>Fruits list</ModalHeader>
            <ModalBody>
              <Formik
                initialValues={{fruitName: ''}}
                onSubmit={(fields, action) => {
                  action.setSubmitting(true);
                  const url = 'http://localhost:3000/getFruit';
                  fetch(url, {
                    method: 'POST',
                    headers: {
                      'Content-Type': 'application/json',
                    },
                    body: JSON.stringify({
                      fruitName: fields.fruitName,
                    }),
                  })
                  .then(res => {
                    action.setSubmitting(false);
                    console.log("Success!!!);
                  })
                  .catch(error => {});
                }}
                render={({ errors, touched, isSubmitting }) => (
                  !isSubmitting ? (
                    <Form>
                      <div className="form-group">
                        <label htmlFor="fruitName">FruitName</label>
                        <Field name="fruitName" type="text"/>
                      </div>
                      <div className="form-group">
                        <Button type="submit" className="bg-gradient-theme-left border-0 " size="m">Submit</Button>
                      </div>
                    </Form>
                  )
                )}
              />
              </ModalBody>
            </Modal>
          </div>
        );
      }
    }

-REACT JS

您可以看到有2个课程 1）组分A 2）组件B
在组件A中，我将B组件称为react-table

中的Button

实际上，我们必须通过调用在组件A的componentDidMount中调用的post API请求“ / getFruitslist”来呈现数据库中的所有数据的表，以便在表中正确填充表中的数据

现在，当我们单击组件B的按钮时，一条记录将插入其中数据库，但在组件A的ComponentDidMount中调用了API 组件B的父级，单击B组件的按钮时，数据不会填充到反应表中。如何实现呢？

Answer 1

React的理念是将状态管理到最重要的组件中。子组件不应保留对其父组件的引用以更新父组件状态。要实现此行为，父组件应通过其属性将回调传递给子组件，然后子组件可以通过调用匹配属性

来调用此回调。

在您的示例中，您可以将属性onAddFruit传递到B组件。当POST调用成功后，您应该调用此函数

.then(fruit => {
  action.setSubmitting(false);
  console.log("Success!!!);
  this.props.onAddFruit(fruit);
})

在父组件A中，您定义了一个函数，该函数会将水果添加到状态变量fruitsDetailsList中。然后，您通过属性B将此功能传递给组件onAddFruit

handleAddFruit = fruit => {
   this.setState(prevState => ({
     fruitsDetailsList: [...prevState.fruitsDetailsList, fruit]
   });
};

B元素的声明将如下所示：

<B onAddFruit={this.handleAddFruit}/>

Answer 2

有多种方法可以实现您想要的。最简单的方法是向下传递props必要的对象，值。在复杂的情况下，我建议使用redux进行应用程序状态管理，这样在需要使状态对象可在多个组件中访问的情况下，使状态保持一致更加容易。

传递道具：

一旦您有2个组件，就可以将数据从A传递到B。在下面的1个小示例中分享如何实现该目标：

class A extends Component {
   constructor(props) {
      super(props);
      this.state = {
         fruitsDetailsList: [],
         fruitCode: this.props.fruitCode,
      };
   }

   render {
       return (
          <B dataFromA={this.state.fruitsDetailsList} />
       )
   }
}

Redux选项：

那么Redux是什么？

JavaScript应用程序的可预测状态容器。

基本上，如果需要使用mapStateToProps中的redux函数访问状态对象，则可以在每个位置将状态对象与每个组件匹配。链接Connect: Extracting Data with mapStateToProps详细说明了该操作。一旦需要修改任何元素，就可以使用mapDispatchToProps进行修改。请找到Connect: Dispatching Actions with mapDispatchToProps链接以进行进一步设置。

进一步了解设置，请点击Redux

摘要：

在您的情况下，由于API调用，状态对象可能会频繁更新，我建议使用第二个选项。乍一看可能很复杂，但是值得付出努力，因为您无需担心状态一致性，并且一旦对任何对象进行了修改，就可以通过props自动更新数据。

我希望这会有所帮助！

如何从reactJS

2 个答案: