时间戳

首页 > 解决方案 > 将具有对象的状态传递给 React 中的另一个兄弟组件并映射它

reactjs - 将具有对象的状态传递给 React 中的另一个兄弟组件并映射它

问题描述

我正在使用一个状态来存储一个对象，就像

const [inputList, setInputList] = useState([{ lessonName: "", lessonDescription: "" }]);

这样我就可以使用 {inputList.map(lessons)} 将它映射到一个表中。在另一个兄弟组件中。

我在兄弟组件中初始化了状态。

    const {inputList} = props;
    const lessons = (inputs,index) => {
    return (
      <tr key ={index}>
        <td>{inputs.lessonName}</td>
        <td>{inputs.lessonDescription}</td>
        <td onClick={handleShow}><AiOutlineUpload  fill='blue'/><sup>  </sup>Add  Content</td>
      </tr>
      )
  }

但是现在当我尝试使用它在表格中映射它时

<tr>
          {inputList.map(lessons)}
      </tr>

它说 inputList 未定义。

标签： reactjsreact-hooksreact-props

解决方案

看看这个代码框

https://codesandbox.io/s/tender-resonance-p64ye

在这种情况下，您需要声明状态和方法来更新父组件中的状态 Form.js

setInputList = (newState) => {
    this.setState({
      inputList: [newState]
    });
  };

您需要将方法和状态传递给子组件

switch (step) {
      case 1:
        return <CreateCourse nextStep={this.nextStep} />;
      case 2:
        return (
          <LessonInfo
            setInputList={this.setInputList.bind(this)}
            nextStep={this.nextStep}
            prevStep={this.prevStep}
          />
        );
      case 3:
        return (
          <LessonList
            inputList={this.state.inputList}
            nextStep={this.nextStep}
            prevStep={this.prevStep}
          />
        );
      default:
        return null;
    }

在更新状态的组件中，您将创建一个函数来处理数据并将其发送到状态。我在 onClick 事件上使用了具有此功能的按钮。

const setInputList = (e, arg) => {
    e.preventDefault();

    const object = {
      lessonName: arg.lessonName,
      lessonDescription: arg.lessonDescription
    };
    props.setInputList(object);
    
  };

在组件渲染中，状态将使用类似这样的方法来调用状态并渲染它，确保它不是未定义的。

{inputList?.map((lesson) => (
                    <>
                      <td>{lesson.lessonName}</td>
                      <td>{lesson.lessonDescription}</td>
                    </>
                  ))}

确保状态是一个对象数组，以便您可以使用 map 函数。

推荐阅读