Question

因此，我是ReacJS和JavaScript的新手，我陷入了一个问题。我有一个由功能组件构建的应用程序，我想做的是从一个组件中查询数据库（架构是2列，id和内容，其中2个列），然后传递该查询的结果（发生{ {1}}，请参见下文）。到目前为止，我的情况是这样：

App.js：

onClick

const App = () => { // *Other functions and states here* const [content, setContent] = useState(''); const getBookContent = useCallback(async () => { await fetch('/get_books/${id}') .then(response => response.json() .then(data => { setContent(data.content) }) ); }, [setContent]) return ( <React.Fragment> <NavBar /> <div> <BooksList books={books} getBooksList={getBooksList} getBookContent={getBookContent} /> <TextEditor getBooksList={getBooksList} getBookContent={content} /> </div> </React.Fragment> ) }是按钮列表。

Booklist

我认为我的做法正确。但是，我认为我的问题出在父元素中并获取const BooksList = ({books, getBooksList, getBookContent}) => { // *Other funcs* return ( <React.Fragment> <div>{books.map(book => { return ( <div key={book.content}> <button onClick={() => getBookContent()}>{book.content}</button> </div> ) })}</div> </React.Fragment> )的ID。我不确定该如何设置，或者这是否正确。

Answer 1

您必须使用Template literals代替单引号。并且您必须通过函数参数提供ID。试试这个：

const getBookContent = useCallback(async (id) => {
    await fetch(`/get_books/${id}`)
        .then(response => 
            response.json()
        .then(data => {
            setContent(data.content)
        })
    );
}, [setContent])

然后像这样在您的组件中调用它：

this.props.getBookContent(ID)

Answer 2

您需要使用反引号：

fetch(`/get_books/${id}`)

对于id，您可以这样做：

<div key={book.id}>
  <button onClick={() => getBookContent(book.id)}>{book.content}</button>
</div>

Answer 3

实际上，您应该使用JavaScript currying，并且需要阅读有关template string的信息。让我们首先修复您的getBookContent函数：

const getBookContent = useCallback(id => async () => {
  await fetch(`/get_books/${id}`)
    .then(response => 
      response.json()
    )
    .then(data =>
      setContent(data.content)
    )
  }, [setContent]);

上面的getBookContent函数是一个currying函数，这意味着在传递id之后，您可以拥有一个具有新ID的新函数，该函数将传递另一个函数。现在将其传递给组件：

~~~

<BooksList
  books={books}
  getBooksList={getBooksList}
  getBookContent={getBookContent}
/>

~~~

在BookList组件中：

<>
  <div>
    {books.map(({ content, id }) => (
        <div key={content}>
          <button
           onClick={getBookContent(id)}
          >
            {content}
          </button>
        </div>
      )
    )}
  </div>
</>

打扰您更改代码样式，我只是根据Airbnb ESLint标准使其更易于阅读。

通过父级将数据从一个组件传递到另一个组件

3 个答案: